mpvue开发小程序前端框架
mpvue是一个使用 Vue.js 开发小程序的前端框架。
一、主要特性：
彻底的组件化开发能力：提高代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
二、快速开始：
环境先决条件：
node > v8.9.0
npm > 5.6.0
1、需要全局安装 vue-cli
npm install --global vue-cli@2.9 // 官方示例，但无法完成（失败）
npm install -g @vue/cli-init // 最终成功命令（推荐官方示例失败时使用）
2、创建一个基于 mpvue-quickstart 模板的项目：
vue init mpvue/mpvue-quickstart <项目名称>
接着是一系列配置请求。。。
3、安装依赖，运行
cd <项目名称>
npm install
npm run dev
4、开发者工具中导入小程序项目
以上命令执行后在根目录多了一个dist文件夹，该文件夹存放编译后的文件，在文件中可以看到有一个wx文件夹，该文件夹为微信小程序内容，可在微信开发者工具中导入项目预览。
我们知道，mpvue是多端开发的，即可以编译到多平台小程序，如：支付宝、百度、今日头条。
那么为什么只编译了微信的呢？我们可以从package.json中文件看到：
"scripts": {
"dev:wx": "node build/dev-server.js wx",
"start:wx": "npm run dev:wx",
"build:wx": "node build/build.js wx",
"dev:swan": "node build/dev-server.js swan",
"start:swan": "npm run dev:swan",
"build:swan": "node build/build.js swan",
"dev:tt": "node build/dev-server.js tt",
"start:tt": "npm run dev:tt",
"build:tt": "node build/build.js tt",
"dev:my": "node build/dev-server.js my",
"start:my": "npm run dev:my",
"build:my": "node build/build.js my",
"dev": "node build/dev-server.js wx",
"start": "npm run dev",
"build": "node build/build.js wx",
"lint": "eslint --ext .js,.vue src"
},
配置中可以看到，执行 npm run dev 编译的是wx,我们如果想要运行编译其他平台的可以通过命令指定，如：
npm run dev:my // 支付宝
npm run dev:swan // 百度
npm run dev:tt // 今日头条
打包发行：
npm run build:my // 支付宝
npm run build:swan // 百度
npm run build:tt // 今日头条
三、生命周期：
1、除了 mounted 在小程序的 onReady() 后触发，其他与 Vue 一致。
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
2、mpvue同时支持小程序的 生命周期：
app 部分：
onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台
page 部分：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
四、API
小程序api调用前缀，如：微信的 wx.showToast()、支付宝的 my.showToast()，在mpvue中统一以 mpvue 代替。如：mpvue.showToast()
五、注意（与Vue官方文档的差异）
1、模板语法
不支持 v-html，小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
2、不支持复杂的 JavaScript 表达式，如：
list.split()
建议使用 computed
3、不支持函数：
不支持在 template 内使用 methods 中的函数
4、暂不支持在组件上使用 Class 与 Style 绑定
5、列表渲染必须有索引，示例如下：
<template>
<ul v-for="(item, index) in list">
<li v-for="(item2, itemIndex) in item">
{{item2.value}}
</li>
</ul>
</template>
6、表单组件
表单组件可以直接使用微信小程序的组件，如：picker、radio。
7、小程序 page onLoad() 传递数据
mpvue 通过 this.$root.$mp.query 获取小程序中的 onLoad() 中可接受的 options数据。
8、小程序 app onLaunch/onShow() 传递数据
mpvue 通过 this.$root.$mp.appOptions 获取小程序 app onLaunch/onShow() 传递的数据。
tips：mpvue 几乎与 Vue 官方一致，所以此处仅记录不同处。
参考官网文档：http://mpvue.com/