mpvue 是一個使用 Vue.js 開發小程序的前端框架（美團的開源項目）。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。
mpvue你可以使用你熟悉的vue框架語法，雙向綁定讓你不用再使用wx的this.setData了，你可以使用npm方便的引入第三方了，真的是貧窮限制了我的想象力啊。個人感覺mpvue比wepy更加簡單，上手更加方便，mpuve五分鍾教程快速構建。
項目git地址：mpvue-demo （代碼注釋很全，使用mpvue很簡單構建一個小程序，拓展）
step1: 查看文檔快速構建simple mpvue project
1 # 全局安裝 vue-cli 2 $ npm install --global vue-cli 3
4 # 創建一個基於 mpvue-quickstart 模板的新項目 5 $ vue init mpvue/mpvue-quickstart my-project
6
7 # 安裝依賴 8 $ cd my-project 9 $ npm install 10 # 啟動構建 11 $ npm run dev
這里我取消了vuex(狀態管理)和ESlint(代碼檢查)，因為個人不喜歡檢測空格和;的規范，你可以根據你的需求配置。
step2:修改代碼，微信開發者工具打開dist目錄，查看是否發生改變。
step3:封裝api和http請求（這里使用的是flyio，除了請求取消，其他功能基本相似axios,大小只有4kb,是axios的三分之一）
package.json加入依賴或者npm install flyio
1 var Fly=require("../lib/wx") //wx.js為您下載的源碼文件 2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式 3 var fly=new Fly(); //創建fly實例 4 5 //添加攔截器 6 fly.interceptors.request.use((config,promise)=>{ 7 //給所有請求添加自定義header 8 config.headers["X-Tag"]="flyio"; 9 return config; 10 }) 11 //配置請求基地址 12 fly.config.baseURL="https://wendux.github.io/" 13 ... 14 15 Page({ 16 //事件處理函數 17 bindViewTap: function() { 18 //調用 19 fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{ 20 //輸出請求數據 21 console.log(d.data) 22 //輸出響應頭 23 console.log(d.header) 24 }).catch(err=>{ 25 console.log(err.status,err.message) 26 }) 27 ... 28 }) 29 })
step4: 將flyio封裝的請求和項目api作為組件庫掛載在原型對象上，這樣不用每個vue單頁面都import 封裝的js,直接使用this.$http調用方法。(flyio官方文檔)
httpUtil.js
1 var Fly=require("../lib/wx") //wx.js為您下載的源碼文件 2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式 3 var fly=new Fly(); //創建fly實例 4 5 //添加攔截器 6 fly.interceptors.request.use((config,promise)=>{ 7 //給所有請求添加自定義header 8 config.headers["X-Tag"]="flyio"; 9 return config; 10 }) 11 //配置請求基地址 12 fly.config.baseURL="https://wendux.github.io/" 13 ... 14 15 Page({ 16 //事件處理函數 17 bindViewTap: function() { 18 //調用 19 fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{ 20 //輸出請求數據 21 console.log(d.data) 22 //輸出響應頭 23 console.log(d.header) 24 }).catch(err=>{ 25 console.log(err.status,err.message) 26 }) 27 ... 28 }) 29 })
apiUtil.js
1 /** 2 * Created by yuchen on 2018/4/2. 3 */ 4 //封裝httpApi 5 import request from './httpUtil' 6 const host = "https://XXX.cn" 7 const api = { 8 // test地址 9 authorList:() => request.get(`${host}/index/list_author_recommend.html`) 10 } 11 12 // export default api 13 export default { //作為組件庫(install) 14 install: function(Vue,name="$http") {//自定義名字(vue-resource也使用$http) 15 Object.defineProperty(Vue.prototype, name, { value: api });//將組件庫掛載在原型對象上 16 } 17 }
step5:vue組件(mpvue官方項目中就創建了card組件，這里注意class需要寫在組件內部里面，不然渲染不出來)
step6:頁面跳轉和傳參(這里mpvue不支持vue-router)
使用微信的頁面跳轉方法，然后跳轉頁面使用this.$root.$mp.query獲取參數。
step7:引入weui,測試效果(根據你的需求引入UI庫，不支持elementUI，或者不使用)。
下載weui.css放入項目中，import引入css，如：import '../static/weui/weui.css'
補充下使用mpvue需要注意的地方(具體參考官方文檔)
1.新增頁面需要npm run dev重啟一下。
2.小程序里所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用。
3.暫不支持在組件上使用 Class 與 Style 綁定，需要在組件內部書寫。
4.mpvue 可以支持小程序的原生組件，比如： picker,map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName"。
5.mpvue 建議使用 v-model.lazy 綁定方式以優化性能，此外 v-model 在老基礎庫下輸入框輸入時可能存在光標重設的問題。
6.寫頁面跳轉時候傳入動態參數，需要寫成:url，如：<navigator url="'../test/main?id='+id hover-class="none""。
7.通過 this.$root.$mp.query 進行獲取小程序在 page onLoad 時候傳遞的 options。通過 this.$root.$mp.appOptions 進行獲取小程序在 app onLaunch/onShow 時候傳遞的 options。
8.使用this.$root.$mp.query獲取參數需要在monted中獲取，在created中會報Cannot read property 'query' of undefined 。
-----原創文章，©版權所有，轉載請注明標明出處：http://www.cnblogs.com/doinbean