https://mp.weixin.qq.com/s/trz-nTuEv1jibj38BVeyvg

開源最前線（ID：OpenSourceTop） 猿妹 編譯

素材來源：http://mpvue.com

美團開源的mpvue引起了不少前端er們的注意。我們來介紹一款由美團點評研發，使用 Vue.js 來開發微信小程式的前端框架 ——mpVue。使用此框架，開發者將得到完整的 Vue.js 開發體驗，同時為 H5 和小程式提供了程式碼複用的能力。

用 Vue.js 開發小程式的前端框架 mpvue

授權協議：MIT

開發語言：JavaScript

作業系統：跨平臺

GitHub地址：https://github.com/Meituan-Dianping/mpvue

mpvue 簡介

mpvue 是一款基於 Vue.js 的小程式開發框架，從底層支援 Vue.js 語法和構建工具體系。mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。

mpvue 框架已經在業務專案中得到實踐和驗證，目前正在美團點評內部大範圍使用。mpvue 是基於 Vue.js 原始碼進行二次開發，在增加了小程式平臺的實現同時，保留了跟隨 Vue.js 版本升級的能力。

mpvue 特性

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

● 徹底的元件化開發能力：提高程式碼

● 完整的 Vue.js 開發體驗

● 方便的 Vuex 資料管理方案：方便構建複雜應用

● 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload

● 支援使用 npm 外部依賴

● 使用 Vue.js 命令列工具 vue-cli 快速初始化專案

● H5 程式碼轉換編譯成小程式目的碼的能力

mpvue 元件

mpvue 作為小程式版本的 Vue.js，在框架 SDK 之外，完整的技術體系還包括如下元件：

● mpvue-loader 提供 webpack 版本的載入器

● mpvue-webpack-target webpack 構建目標

● postcss-mpvue-wxss 樣式程式碼轉換預處理工具

● px2rpx-loader 樣式轉化外掛

● ......

mpvue實現原理

● 將小程式頁面編寫為 Vue.js 實現

● 以 Vue.js 開發規範實現父子元件關聯

小程式程式碼

● 以小程式開發規範編寫檢視層模板

● 配置生命週期函式，關聯資料更新呼叫

● 將 Vue.js 資料對映為小程式資料模型

並在此基礎上，附加如下機制

● Vue.js 例項與小程式 Page 例項建立關聯

● 小程式和 Vue.js 生命週期建立對映關係，能在小程式生命週期中觸發 Vue.js 生命週期

● 小程式事件建立代理機制，在事件代理函式中觸發與之對應的 Vue.js 元件事件響應

快速上手

1. 初始化一個 mpvue 專案

現代前端開發框架和環境都是需要 Node.js 的，如果沒有的話，請先下載 nodejs 並安裝。然後開啟命令列工具：

隨著執行成功的回顯之後，可以看到本地多了個 dist 目錄，這個目錄裡就是生成的小程式相關程式碼。

2. 搭建小程式的開發環境

小程式自己有一個專門的微信開發者工具，最新版本下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

這一步比較簡單，按照提示一步步安裝好就行，然後用微信掃描二維碼登陸。 至此小程式的開發環境差不多完成。

3. 除錯開發 mpvue

選擇 小程式專案 並依次填好需要的資訊：

● 專案目錄：就是前文提到的那個 dist 目錄。

● AppID：沒有的話可以點選體驗“小程式”，隻影響是否可以真機除錯。

● 專案名稱。

如圖：

點選“確定”按鈕後會跳到正式的開發頁面，點選“編輯器”按鈕，關閉自帶的小程式編輯器。然後如圖：

此時，整個 mpvue 專案已經跑起來了。用自己趁手的編輯器（或者IDE）開啟 my-project 中的 src 目錄下的程式碼試試。到此，上手完畢。

●本文編號624，以後想閱讀這篇文章直接輸入624即可

●輸入m獲取文章目錄