Vue與小程序的結(jié)合(mpVue)

初始化一個(gè) mpvue 項(xiàng)目

現(xiàn)代前端開(kāi)發(fā)框架和環(huán)境都是需要 Node.js 的,如果沒(méi)有的話,請(qǐng)先下載 nodejs 并安裝。

然后打開(kāi)命令行工具:

# 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 權(quán)限的
$ npm install --global vue-cli

# 4. 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
# 新手一路回車選擇默認(rèn)就可以了
$ vue init mpvue/mpvue-quickstart my-project
#這一步會(huì)讓你配置一些選項(xiàng) 其中需要配置你的小程序Appid

# 5. 安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev

隨著運(yùn)行成功的回顯之后,可以看到本地my-project文件夾根目錄中多了個(gè) dist 目錄,這個(gè)目錄里就是生成的小程序相關(guān)代碼,通過(guò)微信小程序開(kāi)發(fā)工具瀏覽到該目錄dist文件夾,在微信小程序開(kāi)發(fā)工具上配置上你的Appid。

搭建小程序的開(kāi)發(fā)環(huán)境

小程序自己有一個(gè)專門(mén)的微信開(kāi)發(fā)者工具最新版本下載地址

這一步比較簡(jiǎn)單,按照提示一步步安裝好就行,然后用微信掃描二維碼登陸。 至此小程序的開(kāi)發(fā)環(huán)境差不多完成。

調(diào)試開(kāi)發(fā) mpvue

選擇 小程序項(xiàng)目 并依次填好需要的信息:

項(xiàng)目目錄:就是剛剛創(chuàng)建的項(xiàng)目目錄(非 dist 目錄)
AppID:沒(méi)有的話可以點(diǎn)選體驗(yàn)“小程序”,只影響是否可以真機(jī)調(diào)試。
項(xiàng)目名稱。

如圖:
1.png

點(diǎn)擊“確定”按鈕后會(huì)跳到正式的開(kāi)發(fā)頁(yè)面,點(diǎn)擊“編輯器”按鈕,關(guān)閉自帶的小程序編輯器。然后如圖:
2.png

此時(shí),整個(gè) mpvue 項(xiàng)目已經(jīng)跑起來(lái)了。
用自己趁手的編輯器(或者IDE)打開(kāi) my-project 中的 src 目錄下的代碼試試。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容