一、mpvue是什么？
1、定义：mpvue是一款使用Vue.js开发微信小程序的前端框架。
2、优点：使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为H5和小程序提供了代码复用的能力。
3、知名应用：mpvue已经在美团点评多个实际业务项目中得到了验证
4、使用之前知识储备：
- 初步了解小程序开发规范 developers.weixin.qq.com/miniprogram…
- 熟悉Vue.js基本语法 cn.vuejs.org/
二、vue和小程序对比相同点，为何可以相互转化？
相同点：Vue.js 和小程序都是典型的**逻辑视图层框架**，逻辑层和视图层之间的工作方式为：
- 数据变更驱动视图更新
- 视图交互触发事件
- 事件响应函数修改数据再次触发视图更新
三、相互转化原理
鉴于 Vue.js 和小程序一致的工作原理，
-
所以将小程序的功能托管给Vue.js，在正确的时机将数据变更同步到小程序，从而达到开发小程序的目的。
-
这样，我们可以将精力聚焦在 Vue.js上，参照 Vue.js 编写与之对应的小程序代码，小程序负责视图层展示（项目中用到的组件都可以使用小程序自带组件）。
-
所有业务逻辑收敛到 Vue.js 中，Vue.js 数据变更后同步到小程序
四、第一个mpvue项目
mpvue 为提高效率而生，本身提供了自动生成小程序代码的能力，小程序代码根据 Vue.js 代码构建得到，并不需要同时开发两套代码。
构建最基础的mpvue项目
# 安装 vue-cli
$ npm install vue-cli
# 根据模板项目创建本地项目，目前为内网地址
$ vue init mpvue/mpvue-quickstart my- project
# 安装依赖和启动自动构建
$ cd my-project
$ npm install
$ npm run dev
复制代码使用小程序开发者工具载入 dist 目录即可启动本地调试和预览。
项目转换注意事项：框架的目标是将小程序和 H5 的开发方式通过 Vue.js 建立关联，达到最大程度的代码复用。
但由于平台差异的客观存在（主要集中在实现机制、底层Api 能力差异），我们无法做到代码 100% 复用
难点：Vue.js 和小程序的数据彼此隔离，各自有不同的更新机制
五、完整MpVue项目 文档目录结构
目录结构对比
| Name | VUE文档目录结构 | Mpvue文档目录结构 |
|---|---|---|
| 图片对比 | ||
| 页面跳转 | vue-router 路由 | wx.navigator |
| 数据存储 | VueX | VueX |
| 请求数据 | axios | wx.request |
| 组件使用 | mint-ui或其他 | 小程序自带组件 |
六、Mpvue 项目实践 踩坑记录
juejin.im/post/5ba5fe…