mpvue

Vue.js in mini program

mpvue 是一個使用 Vue.js 開發(fā)小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。

實踐案例

美團旗下小程序：美團汽車票 和 美團充電，此外，正有一大批小程序正在接入中。

快速開始

我們精心準備了一個簡單的 五分鐘上手教程 方便你快速體驗到 mpvue 帶來的開發(fā)樂趣。

名稱由來

• mp：mini program 的縮寫
• mpvue：Vue.js in mini program

主要特性

使用 mpvue 開發(fā)小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：

• 徹底的組件化開發(fā)能力：提高代碼復用性
• 完整的 Vue.js 開發(fā)體驗
• 方便的 Vuex 數(shù)據(jù)管理方案：方便構建復雜應用
• 快捷的 webpack 構建機制：自定義構建策略、開發(fā)階段 hotReload
• 支持使用 npm 外部依賴
• 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
• H5 代碼轉換編譯成小程序目標代碼的能力

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

H5 和小程序如何復用代碼

先來看一段視頻

在左側為已經上線的 H5 頁面，右側為同代碼的小程序頁面，其中只需要更改小部分平臺差異代碼和更新下 webpack 的建構配置就可以直接運行。

在未來最理想的狀態(tài)是，可以一套代碼可以直接跑在多端：WEB、小程序（微信和支付寶）、Native（借助weex）。

當然從產品的層面，我們不建議這么做，各個端有自己的差異性，我們期望的只是開發(fā)和調試體驗一致。

配套設施

mpvue 作為小程序版本的 Vue.js，在框架 SDK 之外，完整的技術體系還包括如下設施。

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