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

导语

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

创建项目

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

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

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

项目结构详述

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

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

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

<template>
	<view class="content">
		
	</view>
</template>

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

<template>
	<view>
		
	</view>
	
	<view>
		
	</view>
</template>

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

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

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

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>

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

扫描二维码关注公众号，回复： 9040611 查看本文章

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

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