Vue 大法好， Vue 作为前端开发语言，真的是覆盖全面，前端，移动端，桌面端，端端渗透。而且越来越多的项目都采用 Vue 开发，现在连微信小程序都有了开源框架，不仅仅是官方的，美团最近也发布了基于 Vue 的微信小程序开发框架。
mpvue 简介
mpvue 是一款基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
mpvue 框架已经在业务项目中得到实践和验证，目前正在美团点评内部大范围使用。mpvue 是基于 Vue.js 源码进行二次开发，在增加了小程序平台的实现同时，保留了跟随 Vue.js 版本升级的能力。
mpvue 特性
使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：
● 彻底的组件化开发能力：提高代码
● 完整的 Vue.js 开发体验
● 方便的 Vuex 数据管理方案：方便构建复杂应用
● 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
● 支持使用 npm 外部依赖
● 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
● H5 代码转换编译成小程序目标代码的能力
mpvue横向对比
我们对微信小程序、mpvue、WePY 这三个开发框架的主要能力和特点做了横向对比，帮助大家了解不同框架的侧重点，结合业务场景和开发习惯，确定技术方案。对于如何更好地使用 mpvue 进行小程序开发，我们总结了一些最佳实践。
-
使用 vue-cli 命令行工具创建项目，使用Vue 2.x 的语法规范进行开发
-
避免使用框架不支持的语法特性，部分 Vue.js语法在小程序中无法使用，尽量使用 mpvue 和 Vue.js 共有特性
-
合理设计数据模型，对数据的更新和操作做到细粒度控制，避免性能问题
-
合理使用组件化开发小程序，提高代码复用率
快速上手
1. 初始化一个 mpvue 项目
现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 nodejs 并安装。然后打开命令行工具：
随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。
2. 搭建小程序的开发环境
小程序自己有一个专门的微信开发者工具，最新版本下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。
3. 调试开发 mpvue
选择 小程序项目 并依次填好需要的信息：
● 项目目录：就是前文提到的那个 dist 目录。
● AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。
● 项目名称。
如图：
点击“确定”按钮后会跳到正式的开发页面，点击“编辑器”按钮，关闭自带的小程序编辑器。然后如图：
此时，整个 mpvue 项目已经跑起来了。用自己趁手的编辑器（或者IDE）打开 my-project 中的 src 目录下的代码试试。到此，上手完毕。
原文发布时间：2018年03月15日
作者：IT派
本文来源：CSDN 如需转载请联系原作者
