本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
mpvue 是美团开源的一款基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。本文将介绍使用 mpvue 如何进行微信小程序开发。
官网地址为：http://mpvue.com。
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
目前美团旗下的小程序：美团汽车票 和 美团充电。都是采用此框架进行的开发。
mpvue 是有 mp 和 vue 组合而来。mp：mini program 的缩写，mpvue：Vue.js in mini program。
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-quickstart mpvue-quickstart
- mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具
快速入门
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 目录，这个目录里就是生成的小程序相关代码。
小程序自己有一个专门的微信开发者工具，最新版本下载地址。
这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。
调试开发 mpvue
选择 小程序项目 并依次填好需要的信息：
-
项目目录：就是前文提到的那个
dist目录。 - AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。
- 项目名称。
如图：
点击“确定”按钮后会跳到正式的开发页面，点击“编辑器”按钮，关闭自带的小程序编辑器。然后如图：
此时，整个 mpvue 项目已经跑起来了。
用自己趁手的编辑器（或者IDE）打开 my-project 中的 src 目录下的代码试试。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 美团 mpvue 教程