不容错过，mpvue，美团点评开源的基于 Vue 微信小程序前端框架

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心， 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

实践案例

美团旗下小程序：美团汽车票 和 美团充电，此外，正有一大批小程序正在接入中。

快速开始

我们精心准备了一个简单的 五分钟上手教程 方便你快速体验到 mpvue 带来的开发乐趣。

名称由来

mp：mini program 的缩写

mpvue：Vue.js in mini program

主要特性

使用mpvue开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

彻底的组件化开发能力：提高代码

完整的 Vue.js 开发体验

方便的 数据管理方案：方便构建复杂应用

快捷的webpack 构建机制：自定义构建策略、开发阶段 hotReload

支持使用 npm 外部依赖

使用 Vue.js命令行工具 vue-cli 快速初始化项目

H5 代码转换编译成小程序目标代码的能力

其它特性正在等着你去探索。

H5 和小程序如何复用代码

示例

初始化一个 mpvue 项目

现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 nodejs 并安装。

然后打开命令行工具：

# 1. 先检查下 Node.js 是否安装成功

$ node -v

v8.9.0

$ npm -v

5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源

$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli

# 一般是要 sudo 权限的

$ npm install --global vue-cli

# 4. 创建一个基于 mpvue-quickstart 模板的新项目

# 新手一路回车选择默认就可以了

$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

随着运行成功的回显之后，可以看到本地多了个 dist目录，这个目录里就是生成的小程序相关代码。

2. 搭建小程序的开发环境

小程序自己有一个专门的微信开发者工具，最新版本下载地址。

这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

3. 调试开发 mpvue

选择 小程序项目并依次填好需要的信息：

【【前端学习交流裙三.三.零.三.三.六.二.八.九.进裙邀请码（编号）：寂静 。裙内不定时分享干货，包括2018最新的企业案例学习资料和零基础入门教程，欢迎自学的小白和大神】

项目目录：就是前文提到的那个 dist 目录。

AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。

项目名称。

如图：

点击“确定”按钮后会跳到正式的开发页面，点击“编辑器”按钮，关闭自带的小程序编辑器。然后如图：

此时，整个 mpvue 项目已经跑起来了。

用自己趁手的编辑器（或者IDE）打开 my-project中的 src目录下的代码试试，如视频示例：

在左侧为已经上线的 H5 页面，右侧为同代码的小程序页面，其中只需要更改小部分平台差异代码和更新下 webpack 的建构配置就可以直接运行。

当然从产品的层面，我们不建议这么做，各个端有自己的差异性，我们期望的只是开发和调试体验一致。

配套设施

mpvue作为小程序版本的 Vue.js，在框架 SDK 之外，完整的技术体系还包括如下设施。

mpvue-loader 提供 webpack 版本的加载器

mpvue-webpack-target webpack 构建目标

px2rpx-loader 样式转化插件

mpvue-quickstart mpvue-quickstart

mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具

其它