mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
一，框架原理：
（1）mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力；
（2）mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力；
（3）修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件。
二，生命周期
除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
三，语法
1，class与style绑定：
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 wxml 中。
（1）class 支持的语法:
<div class="child" :class="i === current ? 'active' : ''">
当 i 和current数据为真时，结果渲染为：
<div class="static active"></div>
另外，
data: {classObject: {active:true,'text-danger':false}}
data: {
classObject: {
active: true,
'text-danger': false }
}
(2),v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
data: {
index:0
}
2,计算属性：在模板中放入太多的逻辑， 会让模板过重且难以维护，所以会用到计算属性,也用于任何复杂逻辑。计算属性相对于methods，是有缓存处理的，直到重新渲染时才再次调用该方法。
二，项目实战
快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：
全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
（我习惯使用yarn来替代npm：
yarn <install>
yarn lint
yarn dev）
