ThorUI-uniapp 开源项目教程

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

ThorUI-uniapp/
├── common/
│   ├── css/
│   ├── js/
│   └── utils/
├── components/
│   ├── thor-button/
│   ├── thor-input/
│   └── thor-list/
├── pages/
│   ├── index/
│   ├── login/
│   └── settings/
├── static/
│   ├── images/
│   └── fonts/
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

• common/: 包含项目的公共资源，如CSS、JavaScript和工具函数。
• components/: 包含项目的自定义组件，如按钮、输入框和列表。
• pages/: 包含项目的页面文件，如首页、登录页和设置页。
• static/: 包含项目的静态资源，如图片和字体。
• App.vue: 项目的根组件。
• main.js: 项目的入口文件。
• manifest.json: 项目的配置文件，包含应用的基本信息和权限配置。
• pages.json: 项目的页面配置文件，包含页面路径和导航栏配置。
• uni.scss: 项目的全局样式文件。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并引入必要的插件和配置。以下是 main.js 的基本结构：

import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'

Vue.config.productionTip = false

Vue.use(uView)

App.mpType = 'app'

const app = new Vue({
    ...App
})

app.$mount()

• 引入 Vue 和 App 组件: 导入 Vue 库和根组件 App。
• 配置 Vue: 设置 productionTip 为 false，以避免生产环境中的提示信息。
• 引入 uView 插件: 引入 uView UI 库并注册为 Vue 插件。
• 创建 Vue 实例: 创建一个新的 Vue 实例并挂载到 DOM 上。

3. 项目的配置文件介绍

manifest.json

manifest.json 是项目的配置文件，包含应用的基本信息和权限配置。以下是 manifest.json 的基本结构：

{
  "name": "ThorUI",
  "description": "A powerful UI library for uni-app",
  "version": "1.0.0",
  "author": "dingyong0214",
  "license": "MIT",
  "uni-app": {
    "scripts": {
      "dev": "uni -p h5",
      "build": "uni build -p h5"
    }
  },
  "dependencies": {
    "uview-ui": "^2.0.0"
  }
}

• 基本信息: 包含应用的名称、描述、版本、作者和许可证。
• 脚本配置: 定义开发和构建命令。
• 依赖项: 列出项目依赖的库和版本。

pages.json

pages.json 是项目的页面配置文件，包含页面路径和导航栏配置。以下是 pages.json 的基本结构：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
    {
      "path": "pages/settings/settings",
      "style": {
        "navigationBarTitleText": "设置"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "ThorUI",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

• 页面配置: 定义每个页面的路径