/mpvue

基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。

Primary LanguageJavaScriptMIT LicenseMIT

mpvue

Vue.js in mini program

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

实践案例

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

快速开始

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

名称由来

  • mp:mini program 的缩写
  • mpvue:Vue.js in mini program

主要特性

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

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

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

H5 和小程序如何复用代码

先来看一段视频

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

在未来最理想的状态是,可以一套代码可以直接跑在多端:WEB、小程序(微信和支付宝)、Native(借助weex)。

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

配套设施

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