mpvue

Vue.js in mini program

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

實(shí)踐案例

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

快速開(kāi)始

我們精心準(zhǔn)備了一個(gè)簡(jiǎn)單的 五分鐘上手教程 方便你快速體驗(yàn)到 mpvue 帶來(lái)的開(kāi)發(fā)樂(lè)趣。

名稱由來(lái)

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

主要特性

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

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

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

H5 和小程序如何復(fù)用代碼

先來(lái)看一段視頻

在左側(cè)為已經(jīng)上線的 H5 頁(yè)面，右側(cè)為同代碼的小程序頁(yè)面，其中只需要更改小部分平臺(tái)差異代碼和更新下 webpack 的建構(gòu)配置就可以直接運(yùn)行。

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

當(dāng)然從產(chǎn)品的層面，我們不建議這么做，各個(gè)端有自己的差異性，我們期望的只是開(kāi)發(fā)和調(diào)試體驗(yàn)一致。

配套設(shè)施

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

• mpvue-loader 提供 webpack 版本的加載器
• mpvue-webpack-target webpack 構(gòu)建目標(biāo)
• postcss-mpvue-wxss 樣式代碼轉(zhuǎn)換預(yù)處理工具
• px2rpx-loader 樣式轉(zhuǎn)化插件
• mpvue-quickstart mpvue-quickstart
• mpvue-simple 輔助 mpvue 快速開(kāi)發(fā) Page / Component 級(jí)小程序頁(yè)面的工具
• 其它