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