mpvue - 基於 Vue.js 的小程序框架

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-loader 提供 webpack 版本的加載器
• mpvue-webpack-target webpack 構建目標
• postcss-mpvue-wxss 樣式代碼轉換預處理工具
• px2rpx-loader 樣式轉化插件
• mpvue-quickstart mpvue-quickstart
• mpvue-simple 輔助 mpvue 快速開發 Page / Component 級小程序頁面的工具
• 其它

貢獻方法

使用 mpvue 的項目徵集

分享交流羣