Hello Uni-App 项目教程

2026-01-16 10:34:25作者：廉皓灿Ida

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": {}
    }
  }
}