美团开源用mpvue,可以用vue开发小程序了！

档传送门：官方文档说明

如何看待美团开源的 mpvue ?

先来看一下，知乎的大佬们对mpvue的看法………….

mpvue 简介

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

mpvue 特性

主要特性

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

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

其它特性正在等着你去探索，详细文档。

配套设施

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

• mpvue-loader 提供 webpack 版本的加载器
• mpvue-webpack-target webpack 构建目标
• postcss-mpvue-wxss 样式代码转换预处理工具
• px2rpx-loader 样式转化插件
• 其它

mpvue实现原理

● 将小程序页面编写为 Vue.js 实现

● 以 Vue.js 开发规范实现父子组件关联

小程序代码

● 以小程序开发规范编写视图层模板

● 配置生命周期函数，关联数据更新调用

● 将 Vue.js 数据映射为小程序数据模型

并在此基础上，附加如下机制

● Vue.js 实例与小程序 Page 实例建立关联

● 小程序和 Vue.js 生命周期建立映射关系，能在小程序生命周期中触发 Vue.js 生命周期

● 小程序事件建立代理机制，在事件代理函数中触发与之对应的 Vue.js 组件事件响应

快速上手

本文假设你既不会 vue 也不会小程序，如嫌拖沓，请直接快进跳读。

1. 初始化一个 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

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

• 项目目录：就是刚刚创建的项目目录（非 dist 目录）
• AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。
• 项目名称。

如图：

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

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

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

到此，上手完毕。

注意事项

1. 新增的页面需要重新 npm run dev 来进行编译