美團小程式架構 mpvue mvvm架構互通

mpvue （github 位址請參見）是一個使用 Vue.js 開發小程式的前端架構。架構基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實作，使其可以運作在小程式環境中，進而為小程式開發引入了整套 Vue.js 開發體驗。
           

主要特性：

使用 mpvue 開發小程式，你将在小程式技術體系的基礎上擷取到這樣一些能力： 
1. 徹底的元件化開發能力：提高代碼複用性 
2. 完整的 Vue.js 開發體驗 
3. 友善的 Vuex 資料管理方案：友善建構複雜應用 
4. 快捷的 webpack 建構機制：自定義建構政策、開發階段 hotReload 
5. 支援使用 npm 外部依賴 
6. 使用 Vue.js 指令行工具 vue-cli 快速初始化項目 
7. H5 代碼轉換編譯成小程式目标代碼的能力
           

由于mpvue基于vue而來，是以基本的結構和指令也差不多；

首先我們先下載下傳腳手架：

cmd輸入：vue init mpvue/mpvue-quickstart test-wxapp
           

然後 進入我們建立的項目，并安裝依賴

cd test-wxapp
npm i
           

• 1
• 2
• 3

最後，在運作一下我們的開發服務

npm run dev
           

• 1
• 2

項目就跑起來了，這個時候，我們打開微信開發者工具，選擇小程式，然後建立一個，項目目錄填 

我們項目目錄下的

dist

目錄 

test-wxapp/dist

,就可以看到效果了

到此為止，一個基本的項目就完成了，但是，本文的目的不是讓你學會搭一個空項目的，空項目的話，我覺得官方教程做的已經夠好了。