美團(tuán)點(diǎn)評(píng)近日開源了 mpvue ，這是一個(gè)使用 Vue.js 開發(fā)小程序的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn)，同時(shí)為 H5 和小程序提供了代碼復(fù)用的能力。如果想將 H5 項(xiàng)目改造為小程序，或開發(fā)小程序后希望將其轉(zhuǎn)換為 H5，mpvue 將是十分契合的一種解決方案。

mpvue 的核心目標(biāo)是提高開發(fā)效率，增強(qiáng)開發(fā)體驗(yàn)。使用該框架，開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開發(fā)體驗(yàn)，開發(fā)者編寫 Vue.js 代碼，mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行。此外，框架還通過 vue-cli 工具向開發(fā)者提供 quick start 示例代碼，開發(fā)者只需執(zhí)行一條簡(jiǎn)單命令，即可獲得可運(yùn)行的項(xiàng)目。

主要特性：

• 徹底的組件化開發(fā)能力：提高代碼

• 完整的 Vue.js 開發(fā)體驗(yàn)

• 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

• 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload

• 支持使用 npm 外部依賴

• 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

• H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

實(shí)現(xiàn)原理：

Vue代碼

• 將小程序頁面編寫為 Vue.js 實(shí)現(xiàn)

• 以 Vue.js 開發(fā)規(guī)范實(shí)現(xiàn)父子組件關(guān)聯(lián)

小程序代碼

• 以小程序開發(fā)規(guī)范編寫視圖層模板

• 配置生命周期函數(shù)，關(guān)聯(lián)數(shù)據(jù)更新調(diào)用

• 將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型

并在此基礎(chǔ)上，附加如下機(jī)制

• Vue.js 實(shí)例與小程序 Page 實(shí)例建立關(guān)聯(lián)

• 小程序和 Vue.js 生命周期建立映射關(guān)系，能在小程序生命周期中觸發(fā) Vue.js 生命周期

• 小程序事件建立代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對(duì)應(yīng)的 Vue.js 組件事件響應(yīng)

據(jù)悉，mpvue 框架已經(jīng)在業(yè)務(wù)項(xiàng)目中得到實(shí)踐和驗(yàn)證，目前正在美團(tuán)點(diǎn)評(píng)內(nèi)部大范圍使用。mpvue 是基于 Vue.js 源碼進(jìn)行二次開發(fā)，在增加了小程序平臺(tái)的實(shí)現(xiàn)同時(shí)，保留了跟隨 Vue.js 版本升級(jí)的能力。