README.md

    mpvue logo

    npm npm

    mpvue

    Vue.js 小程序版, fork 自 vuejs/vue@2.4.1,保留了 vue runtime 能力,添加了小程序平台的支持。

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

    文档

    mpvue 文档

    实践案例

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

    快速开始

    我们精心准备了一个简单的 五分钟上手教程 方便你快速体验到 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 之外,完整的技术体系还包括如下设施。

    使用 mpvue 的项目

    <!-- 非标准小程序码 -->
    <img src="https://user-images.githubusercontent.com/1176855/41755510-62b9fc90-760a-11e8-89be-b6ddbee08e63.jpg" width="100" title="暖茶阿妈的占卜小屋"/>
    <img src="https://user-images.githubusercontent.com/22720942/40184432-da33291c-5a22-11e8-966c-c836d1dc8078.png" width="100" />
    <img src="https://camo.githubusercontent.com/25b2636179cd939461975ada9f996c77d15c4d2a/68747470733a2f2f7778342e73696e61696d672e636e2f6d773639302f373032643563616167793166746e323975797a38666a323037363038367439612e6a7067" width="100" title="扫域名的小程序,米农帮"/>

    贡献方法

    更多项目征集

    分享交流群

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/Meituan-Dianping/mpvue

    发行版本

    当前项目没有发行版本

    贡献者 151

    全部贡献者

    开发语言

    • JavaScript 98.4 %
    • HTML 0.6 %
    • CSS 0.4 %
    • TypeScript 0.4 %
    • Shell 0.1 %