Hello Uni-App 项目教程

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

Hello Uni-App 项目的目录结构如下：

hello-uniapp/
├── App.vue
├── main.js
├── manifest.json
├── pages/
│   ├── index/
│   │   ├── index.vue
│   │   └── index.js
│   └── other/
│       ├── other.vue
│       └── other.js
├── static/
│   └── logo.png
├── components/
│   └── HelloWorld.vue
├── uni_modules/
│   └── some-module/
│       ├── package.json
│       └── index.js
└── uni.scss

目录结构介绍

• App.vue: 项目的根组件。
• main.js: 项目的入口文件。
• manifest.json: 项目的配置文件。
• pages/: 存放页面组件的目录。
  • index/: 首页组件。
  • other/: 其他页面组件。
• static/: 存放静态资源的目录。
• components/: 存放可复用组件的目录。
• uni_modules/: 存放 uni-app 模块的目录。
• uni.scss: 全局样式文件。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，主要负责初始化 Vue 实例并挂载到 DOM 上。以下是 main.js 的基本内容：

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

Vue.config.productionTip = false

App.mpType = 'app'

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

app.$mount()

启动文件介绍

• import Vue from 'vue': 引入 Vue 库。
• import App from './App': 引入根组件 App.vue。
• Vue.config.productionTip = false: 关闭生产环境提示。
• App.mpType = 'app': 设置小程序类型为应用。
• const app = new Vue({ ...App }): 创建 Vue 实例。
• app.$mount(): 挂载 Vue 实例到 DOM 上。

3. 项目的配置文件介绍

manifest.json

manifest.json 是项目的配置文件，用于配置应用的基本信息、页面路由、平台配置等。以下是 manifest.json 的基本内容：

{
  "name": "hello-uniapp",
  "description": "A uni-app project",
  "version": "1.0.0",
  "author": "dcloud",
  "appid": "",
  "appkey": "",
  "router": {
    "mode": "hash",
    "base": "/"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/other/other",
      "style": {
        "navigationBarTitleText": "其他"
      }
    }
  ],
  "usingComponents": true,
  "nvueCompiler": "weex",
  "splashscreen": {
    "alwaysShowBeforeRender": true,
    "autoclose": true
  },
  "app-plus": {
    "modules": {},
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>"
        ]
      },
      "ios": {},
      "sdkConfigs": {}
    }
  }
}

配置文件介绍

• name: 应用名称。
• description: 应用描述。
• version: 应用版本。
• author: 应用作者。
• appid 和 appkey: 应用标识和密钥。
• router: 路由配置。
• pages: 页面配置。
• usingComponents: 是否使用组件。
• nvueCompiler: nvue