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

實踐案例

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

快速開始

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

名稱由來

mp：mini program 的縮寫

mpvue：Vue.js in mini program

主要特性

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

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

• 完整的 Vue.js 開發體驗

• 方便的 數據管理方案：方便構建複雜應用

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

• 支持使用 npm 外部依賴

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

• H5 代碼轉換編譯成小程序目標代碼的能力

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

H5 和小程序如何複用代碼

示例

1. 初始化一個 mpvue 項目

現代前端開發框架和環境都是需要 Node.js 的，如果沒有的話，請先下載 nodejs 並安裝。

然後打開命令行工具：

# 1. 先檢查下 Node.js 是否安裝成功

$ node -v

v8.9.0

$ npm -v

5.6.0

# 2. 由於眾所周知的原因，可以考慮切換源為 taobao 源

$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli

# 一般是要 sudo 權限的

$ npm install --global vue-cli

# 4. 創建一個基於 mpvue-quickstart 模板的新項目

# 新手一路回車選擇默認就可以了

$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你

$ cd my-project

$ npm install

$ npm run dev

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

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

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

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

3. 調試開發 mpvue

選擇 小程序項目並依次填好需要的信息：

• 項目目錄：就是前文提到的那個 dist 目錄。

• AppID：沒有的話可以點選體驗“小程序”，隻影響是否可以真機調試。

• 項目名稱。

如圖：

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

此時，整個 mpvue 項目已經跑起來了。

用自己趁手的編輯器（或者IDE）打開 my-project中的 src目錄下的代碼試試，如視頻示例：

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

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

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

配套設施

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

• mpvue-loader 提供 webpack 版本的加載器

• mpvue-webpack-target webpack 構建目標

• postcss-mpvue-wxss 樣式代碼轉換預處理工具

• px2rpx-loader 樣式轉化插件

• mpvue-quickstart mpvue-quickstart

• mpvue-simple 輔助 mpvue 快速開發 Page / Component 級小程序頁面的工具

• 其它

對想學習前端的小夥伴，小編給你們準備了全套前端電子版書籍，包含了目前大部分前端開發的書

領取方式，先關注小編，然後私信發“前端”，就能獲取全套書籍，你還不心動嗎？心動就趕緊發私信 ，獲取資源

美團 。微信。小程序 。互聯網 。 編程語言