美團(tuán)很早就開源了mpvue這個(gè)項(xiàng)目，如此看來，美團(tuán)可不僅僅是一家團(tuán)購網(wǎng)站，真正的技術(shù)驅(qū)動(dòng)型企業(yè)，使得我們多了一種用來開發(fā)微信小程序的框架選項(xiàng)。由于mpvue框架是完全基于Vue框架的（重寫了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序環(huán)境本身的原因而不能使用，但是瑕不掩瑜），這給使用過Vue開發(fā)Web應(yīng)用的前端開發(fā)者提供了極低的門檻來開發(fā)小程序。

    搭建所需的軟件環(huán)境，首先mpvue是基于vue.js，同時(shí)也需要vue-cli腳手架，注意一點(diǎn)：你的node環(huán)境版本必須大于9.0，否則會(huì)出現(xiàn)和新版mpvue不兼容的情況，首先去微信公眾號(hào)平臺(tái)注冊(cè)開發(fā)者賬號(hào)： https://mp.weixin.qq.com  記得驗(yàn)證一下開發(fā)者身份，另外獲取appid，并且點(diǎn)擊生成appsecret秘鑰，一般審核速度很快，大概一天就會(huì)通過。附上微信小程序開發(fā)文檔： https://developers.weixin.qq.com/miniprogram/dev/framework/

npm cache clean --force

npm set registry https://registry./

npm install npm -g

npm install -g vue-cli

npm cache clean --force

    安裝好之后，查看node版本是否大于9.0 node -v

    之后，運(yùn)行命令，創(chuàng)建一個(gè)mpvue的工程

vue init mpvue/mpvue-quickstart mpvue

    圖上的appid就是注冊(cè)時(shí)獲取到的

    隨后進(jìn)入到項(xiàng)目目錄中：cd mpvue

    輸入命令安裝依賴

npm install

    安裝成功后，在項(xiàng)目目錄下輸入npm run dev 啟動(dòng)項(xiàng)目

    mpvue的項(xiàng)目結(jié)構(gòu)是這樣的：

    可以看到，和傳統(tǒng)的vue項(xiàng)目沒有任何差別，簡(jiǎn)直太友好了

    此時(shí)，可以去下載一個(gè)微信小程序開發(fā)者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    選擇適合自己系統(tǒng)的版本下載，這里我下載mac版，缺點(diǎn)是體積有點(diǎn)略大，安裝后要500多m，希望騰訊以后可以壓縮一下，輕量級(jí)開發(fā)工具應(yīng)該小巧輕便。

    打開微信小程序開發(fā)工具，點(diǎn)擊?新建項(xiàng)目

    選擇導(dǎo)入項(xiàng)目，輸入項(xiàng)目目錄以及appid

    最后打開導(dǎo)入的項(xiàng)目，這時(shí)候需要耐心等待一小會(huì)，不要著急

    成功打開后，就可以看到界面了

    此時(shí)只要修改對(duì)應(yīng)的vue組件，小程序就會(huì)實(shí)時(shí)進(jìn)行更改，不過需要注意一點(diǎn)，新建組件的時(shí)候，需要手動(dòng)重啟mpvue項(xiàng)目:npm run dev

    是不是很簡(jiǎn)單呢，如果你是一位精通vue的開發(fā)者，那么開發(fā)微信小程序?qū)τ谀銇碚f也就是 a piece of cake