uni-app实战——创建项目、项目结构详解

导语

上篇文章说过让大家自己去官网看如何创建uni-app的项目，但是我觉得还是有必要讲解一下需要注意的地方。那今天记录一下如何使用uni-app创建项目，并讲解uni-app的结构。

创建项目

1.点击文件——>新建——>项目

2.选择uni-app——>填写项目名称——>选择默认模板

注意这里的项目名称不是你的app 的名称，app的名称需要在代码里定义

项目结构详述

1.首先我们看一下官方的解释

2.创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看

这里要注意一下，我们以后写一个页面，一般是一个template里面嵌套一个view，然后在view里面编写你的代码

最好不要一个template里面写多个view并列，否则会有一些未知的错误,下面是错误示范

然后是js的代码，里面主要是vue的js语法

最后是css代码，用来美化页面

页面就包含以上三个部分，我们点减号把代码收起，可以清晰的看到它的代码结构。

3.再来看一下pages.json这个文件

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"//页面导航栏的名称
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "我的第一个app",//默认导航栏名称
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

4.再来看一下manifest.json这个文件

里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。

5.main.js

这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。

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

Vue.config.productionTip = false

App.mpType = 'app'

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

6.App.vue

好了，大概就介绍到这里了，看多了容易晕，可以去看一下官网