mpvue：使用 Vue.js 开发微信小程序的前端框架安装与使用指南

一、项目官方信息

现状说明：mpvue 是一个已停止主动维护的经典框架。它在 2017 年由美团开源，曾一度是 Vue 语法写小程序的主流方案；如今官方已不再迭代，新项目通常转向 Taro 等现代框架。本文按其官方 README 记录其安装与用法，供学习与历史项目维护参考。

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

二、官方图片

上图为 mpvue 仓库在 GitHub 上的社交预览图。

三、环境要求

• Node.js 环境；
• 配套 Vue 工具链（mpvue 基于 Vue.js，使用 vue-cli 初始化）；
• 微信开发者工具（用于小程序端预览与调试）。

四、安装与初始化步骤

1. 快速上手教程

官方提供了一个五分钟上手教程：http://mpvue.com/mpvue/quickstart。

2. 初始化项目

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

# 全局安装 vue-cli（如尚未安装）
npm install -g vue-cli

# 使用官方 quickstart 模板初始化
vue init mpvue/mpvue-quickstart my-project
cd my-project
npm install
npm run dev

3. 用微信开发者工具运行

• 构建产物（dist）用微信开发者工具导入；
• 在「详情 → 本地设置」按需勾选「不校验合法域名」等；
• 点击「编译」即可预览。

五、使用方法

mpvue 带来的主要能力（README）：

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

配套设施（README）：

• mpvue-loader：webpack 版加载器；
• mpvue-webpack-target：webpack 构建目标；
• postcss-mpvue-wxss：样式代码转换预处理；
• px2rpx-loader：样式转化插件；
• mpvue-quickstart：快速初始化模板；
• mpvue-simple：辅助快速开发 Page/Component 级页面。

官方实践案例包括美团旗下小程序「美团汽车票」和「美团充电」。

六、常见问题 FAQ

1. mpvue 现在还能用吗？ 它已停止主动维护。学习、维护历史项目可以；新项目建议评估 Taro 等现代框架。

2. 它和原生小程序有什么区别？ 你用 Vue.js 语法写组件，框架改造 Vue 的 runtime/compiler，让它跑在小程序环境里，从而获得 Vue 全家桶的开发体验。

3. 怎么初始化一个 mpvue 项目？ 用 vue-cli + 官方 quickstart 模板：vue init mpvue/mpvue-quickstart，详见 http://mpvue.com/mpvue/quickstart。

4. 支持 Vuex 吗？ 支持。README 明确提供 Vuex 数据管理方案，适合复杂应用。

5. H5 和小程序能复用代码吗？ 只需改动小部分平台差异代码并更新 webpack 配置，即可同代码跑 H5 与小程序。

6. 官方文档在哪？ 官网 http://mpvue.com，快速上手 http://mpvue.com/mpvue/quickstart。

七、跳转链接

• GitHub 仓库：https://github.com/mpvue/mpvue
• 官方网站：http://mpvue.com
• 快速上手：http://mpvue.com/mpvue/quickstart