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 [email protected] // 官方示例，但无法完成（失败）
npm install -g @vue/cli-init // 最终成功命令（推荐官方示例失败时使用）2、创建一个基于 mpvue-quickstart 模板的项目：
vue init mpvue/mpvue-quickstart <项目名称>接着是一系列配置请求。。。
3、安装依赖，运行
cd <项目名称>
npm install
npm run dev4、开发者工具中导入小程序项目
以上命令执行后在根目录多了一个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、列表渲染必须有索引，示例如下：
-
{{item2.value}}
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/
注：个人笔记，仅供参考，请参考官方文档。