mpvue入坑之旅（二）基础

1 基础知识

一个 Vue 应用由通过new Vue创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

1.1 目录结构

• build：构建目录，项目构建相关代码
• config：配置目录
• dist：输出目录，当前输出的是微信小程序文件（wxml、js、wxss）
  node_modules：npm 加载的项目依赖模块目录
  static：静态资源目录
  src：开发目录，编写小程序功能

1.2 项目配置文件

• package.json：主配置文件，包含mpvue项目的基本描述信息、项目所依赖的第三方库以及版本信息、以及可执行的脚本信息
• project.config.json：管理小程序的配置文件，包含小程序的appid、代码主目录、以及编译选项等等信息

1.3 开发目录文件

src下默认生成了几个子目录以及App.vue、main.js，这些都不是必须的，可以自定义配置，不过使用默认结构便于理解。

• components：可复用组件目录
• pages：小程序页面目录
• utils：公共函数目录
• main.js：程序入口文件，加载各种公共组件
• App.vue：页面入口文件
• app.json：小程序配置文件，和原生开发的一样

PS：每个页面下的main.js为固定文件，注册页面时添加的路径为 pages/{{page_name}}/main，如果觉得每个页面都是index.vue+main.js不顺眼，可以了解一下 第三方插件 mpvue-entry

1.4 文件结构

main.js的内容基本重复

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

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

.vue文件分为三大块：template、script、style

<template>
	vue组件的模板内容
</template>

<script>
	//引入外部文件
	import  filename from '外部文件';
	//vue组件的业务逻辑
    export default {
        data(){
            return{
               //私有数据
            }
        },
        methods: {
        	//业务逻辑处理
        },
        created() {
        	//小程序加载时就执行
        },
        mounted() {  
        	// 对应小程序的 onLoad，第一次显示页面时执行
    	},
    	//小程序原生生命周期函数
    	onLoad() {
		},
		onReady () {
		},
		onShow() {
		},
		onUnload() {
		},
		onHide() {
		}
    }
</script>

<style scoped>
	html标签的样式
</style>