Vue 大法好， Vue 作為前端開發語言，真的是覆蓋全面，前端，移動端，桌面端，端端滲透。而且越來越多的專案都採用 Vue 開發，現在連微信小程式都有了開源框架，不僅僅是官方的，美團最近也釋出了基於 Vue 的微信小程式開發框架。

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、WePY 這三個開發框架的主要能力和特點做了橫向對比，幫助大家瞭解不同框架的側重點，結合業務場景和開發習慣，確定技術方案。對於如何更好地使用 mpvue 進行小程式開發，我們總結了一些最佳實踐。

• 使用 vue-cli 命令列工具建立專案，使用Vue 2.x 的語法規範進行開發

• 避免使用框架不支援的語法特性，部分 Vue.js語法在小程式中無法使用，儘量使用 mpvue 和 Vue.js 共有特性

• 合理設計資料模型，對資料的更新和操作做到細粒度控制，避免效能問題

• 合理使用元件化開發小程式，提高程式碼複用率

快速上手

1. 初始化一個 mpvue 專案

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

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

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

小程式自己有一個專門的微信開發者工具，最新版本下載地址：

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

3. 除錯開發 mpvue

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

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

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

● 專案名稱。

如圖：

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

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

∞∞∞∞∞

公眾號回覆“小程式”，

邀你加入{小程式技術圈}