【亲测免费】 uv-ui 开源项目教程

1. 项目的目录结构及介绍

uv-ui 项目的目录结构如下：

uv-ui/
├── common/
├── components/
├── pages/
├── static/
├── uni_modules/
├── unpackage/
│   └── res/
│       └── icons/
├── util/
│   └── request/
├── .gitignore
├── App.vue
├── LICENSE
├── README.md
├── index.html
├── main.js
├── manifest.json
├── pages.json
├── uni.scss
└── ...

目录结构介绍

• common/: 存放公共资源文件。
• components/: 存放项目中使用的组件。
• pages/: 存放项目的页面文件。
• static/: 存放静态资源文件。
• uni_modules/: 存放 uni-app 模块。
• unpackage/: 存放打包后的资源文件。
• util/: 存放工具类文件，如请求封装等。
• .gitignore: Git 忽略文件配置。
• App.vue: 项目的根组件。
• LICENSE: 项目的开源许可证。
• README.md: 项目的说明文档。
• index.html: 项目的入口 HTML 文件。
• main.js: 项目的入口 JavaScript 文件。
• manifest.json: 项目的配置文件。
• pages.json: 项目的页面配置文件。
• uni.scss: 项目的样式文件。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 中。以下是 main.js 的基本结构：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue

App.vue 是项目的根组件，包含了全局样式和模板结构。以下是 App.vue 的基本结构：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 全局样式 */
</style>

3. 项目的配置文件介绍

manifest.json

manifest.json 是 uni-app 项目的配置文件，包含了应用的基本信息、平台配置、页面路由等。以下是 manifest.json 的基本结构：

{
  "name": "uv-ui",
  "description": "uv-ui 是一个兼容 Vue3 和 Vue2 的多平台快速开发的 UI 框架",
  "version": "1.0.0",
  "uni-app": {
    "scripts": {},
    "easycom": {
      "autoscan": true,
      "custom": {
        "^uv-(.*)": "@/components/uv-$1/uv-$1.vue"
      }
    }
  },
  "app-plus": {
    "usingComponents": {}
  },
  "h5": {
    "router": {
      "mode": "history",
      "base": "/h5/"
    }
  }
}

pages.json

pages.json 是 uni-app 项目的页面配置文件，包含了页面路径、窗口样式、导航栏样式等。以下是 pages.json 的基本结构：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uv-ui",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }