前言： ?mpvue ，這是一個使用?Vue.js?開發(fā)小程序的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn)，同時為 H5 和小程序提供了代碼復(fù)用的能力。如果想將 H5 項(xiàng)目改造為小程序，或開發(fā)小程序后希望將其轉(zhuǎn)換為 H5，mpvue 將是十分契合的一種解決方案。
mpvue?的核心目標(biāo)是提高開發(fā)效率，增強(qiáng)開發(fā)體驗(yàn)。使用該框架，開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉 Vue.js 基本語法即可上手?？蚣芴峁┝送暾?Vue.js 開發(fā)體驗(yàn)，開發(fā)者編寫 Vue.js 代碼，mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行。此外，框架還通過 vue-cli 工具向開發(fā)者提供 quick start 示例代碼，開發(fā)者只需執(zhí)行一條簡單命令，即可獲得可運(yùn)行的項(xiàng)目。
主要特性：
徹底的組件化開發(fā)能力：提高代碼
完整的Vue.js開發(fā)體驗(yàn)
方便的Vuex數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
快捷的webpack構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
支持使用 npm 外部依賴
使用Vue.js命令行工具 vue-cli 快速初始化項(xiàng)目
H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
實(shí)現(xiàn)原理：
Vue代碼
將小程序頁面編寫為 Vue.js 實(shí)現(xiàn)
以 Vue.js 開發(fā)規(guī)范實(shí)現(xiàn)父子組件關(guān)聯(lián)
小程序代碼
以小程序開發(fā)規(guī)范編寫視圖層模板
配置生命周期函數(shù)，關(guān)聯(lián)數(shù)據(jù)更新調(diào)用
將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型
并在此基礎(chǔ)上，附加如下機(jī)制
Vue.js 實(shí)例與小程序 Page 實(shí)例建立關(guān)聯(lián)
小程序和 Vue.js 生命周期建立映射關(guān)系，能在小程序生命周期中觸發(fā) Vue.js 生命周期
小程序事件建立代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對應(yīng)的 Vue.js 組件事件響應(yīng)
據(jù)悉，mpvue 框架已經(jīng)在業(yè)務(wù)項(xiàng)目中得到實(shí)踐和驗(yàn)證，目前正在美團(tuán)點(diǎn)評內(nèi)部大范圍使用。mpvue?是基于 Vue.js 源碼進(jìn)行二次開發(fā)，在增加了小程序平臺的實(shí)現(xiàn)同時，保留了跟隨 Vue.js 版本升級的能力。
mpvue最佳實(shí)踐 , 美團(tuán)出的一個小程序框架
看手機(jī)微信，看到說美團(tuán)出了1個小程序框架，? mpvue
搜下來試試，看了網(wǎng)上的一個對比
-----------------
以下為引用
我們對微信小程序、mpvue、WePY 這三個開發(fā)框架的主要能力和特點(diǎn)做了橫向?qū)Ρ龋瑤椭蠹伊私獠煌蚣艿膫?cè)重點(diǎn)，結(jié)合業(yè)務(wù)場景和開發(fā)習(xí)慣，確定技術(shù)方案。對于如何更好地使用 mpvue 進(jìn)行小程序開發(fā)，我們總結(jié)了一些最佳實(shí)踐。
使用 vue-cli 命令行工具創(chuàng)建項(xiàng)目，使用Vue 2.x 的語法規(guī)范進(jìn)行開發(fā)
避免使用框架不支持的語法特性，部分 Vue.js語法在小程序中無法使用，盡量使用 mpvue 和 Vue.js 共有特性
合理設(shè)計數(shù)據(jù)模型，對數(shù)據(jù)的更新和操作做到細(xì)粒度控制，避免性能問題
合理使用組件化開發(fā)小程序，提高代碼復(fù)用率
Vue真的很好用?。?/p>
另外，提供一個對原生微信小程序、mpvue、WePY這三種開發(fā)小程序方式的比較，感興趣的朋友可以參考一下：
mpvue?（github 地址請參見）是一個使用?Vue.js?開發(fā)小程序的前端框架。框架基于?Vue.js?核心，mpvue?修改了?Vue.js?的?runtime?和?compiler?實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套?Vue.js?開發(fā)體驗(yàn)。
【最近更新】mpvue入門系列教程：
接觸微信小程序有一段時間的開發(fā)者或開發(fā)團(tuán)隊，我相信多多少少都會為自己搭建封裝一些便于開發(fā)的框架/腳手架，尤其是一些做過Web開發(fā)的開發(fā)者，受到現(xiàn)如今Web主流開發(fā)框架如Angular，React，Vue等的核心思想的影響，對數(shù)據(jù)/狀態(tài)管理、組件化、跨平臺等都有較高的追求。
所以，從小程序出現(xiàn)到現(xiàn)在，已經(jīng)陸陸續(xù)續(xù)出現(xiàn)了一些遵循了這些Web開發(fā)思想的小程序框架，比較突出的就是WePY，一個由騰訊團(tuán)隊推出的小程序組件化開發(fā)框架，主要的特點(diǎn)如下：
類Vue開發(fā)風(fēng)格
支持自定義組件開發(fā)
支持引入NPM包
支持Promise
支持ES2015+特性，如Async Functions
支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug
支持多種插件處理，文件壓縮，圖片壓縮，內(nèi)容替換等
支持 Sourcemap，ESLint等
小程序細(xì)節(jié)優(yōu)化，如請求列隊，事件優(yōu)化等
這些特性基本上是現(xiàn)今主流Web開發(fā)的標(biāo)配了。因?yàn)槲以陂_發(fā)Web應(yīng)用的時候也經(jīng)常使用Vue，所以在試用WePY的過程中覺得非常的熟悉好上手，它確實(shí)是一個值得使用、可以有效提高生產(chǎn)力的好框架。
不過，今天的主角并不是這個類Vue框架WePY，我想聊的是另外一個基于Vue的框架：美團(tuán)點(diǎn)評團(tuán)隊出品的小程序開發(fā)框架：mpvue。為什么說WePY是一個“類Vue”的框架，而這個mpvue是“基于Vue”的框架呢？因?yàn)閃ePY是在代碼開發(fā)風(fēng)格上借鑒了Vue，本身和Vue沒有什么關(guān)系；而這個mpvue是從整個Vue的核心代碼上經(jīng)過二次開發(fā)而形成的一個框架，相當(dāng)于是給Vue本身賦能，增加了開發(fā)微信小程序的能力。
使用mpvue開發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：
徹底的組件化開發(fā)能力：提高代碼
完整的 Vue.js 開發(fā)體驗(yàn)
方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
支持使用 npm 外部依賴
使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
它的目標(biāo)是：在未來最理想的狀態(tài)下，可以一套代碼可以直接跑在多端：WEB、微信小程序、支付寶小程序、Native（借助weex）。不過由于各個端之間都存在一些比較明顯的差異性，從產(chǎn)品的層面上講，不建議這么做，這個框架的官方他們對它的期望的也只是開發(fā)和調(diào)試體驗(yàn)的一致。
通過官網(wǎng)提供的五分鐘快速上手教程，可以發(fā)現(xiàn)它的開發(fā)過程和Vue保持高度一致，連使用的命令行工具也還是原先開發(fā)Web應(yīng)用時所用的vue-cli：
#創(chuàng)建一個小程序工程vue init mpvue/mpvue-quickstart my-project
編寫模板代碼的時候通常也主要是以HTML為主，比如我們編寫一個.vue組件時寫了如下代碼：
Vuex counter：{{ count }}
+-
去往首頁
而mpvue會通過編譯，將這個HTML模板轉(zhuǎn)換成小程序的WXML代碼：
Vuex counter：{{ count }}+-去往首頁
這樣，我們就可以完全用開發(fā)Web應(yīng)用的方式去開發(fā)小程序了，
》〉》》〉 vx小程序搜索 “愛心拼圖” 可以看看我業(yè)余寫的vx小程序。
