如何運(yùn)行g(shù)ithub上的mpvue小程序開(kāi)源項(xiàng)目
2021-07-28 16:10:18

在安裝好了node和vue腳手架之后，就可以找一個(gè)例子來(lái)本地運(yùn)行一下了，如果環(huán)境還沒(méi)有安裝好

以mpvue音樂(lè)小程序項(xiàng)目源碼/mpvue微信小程序demo 為例
下載地址：https://github.com/XieTongXue/mpvue-music

1：打開(kāi)鏈接，將項(xiàng)目download到本地

?

?

2：使用git或者cmd進(jìn)入項(xiàng)目目錄，安裝依賴(lài),為了避免國(guó)外服務(wù)器網(wǎng)速慢，我們使用國(guó)內(nèi)淘寶鏡像安裝。

 cnpm install

?

?

3：安裝完成之后，輸入運(yùn)行命令

npm run dev

?

?

安裝預(yù)覽的時(shí)候，不是用瀏覽器打開(kāi)輸入：localhost:8080。而是打開(kāi)微信開(kāi)發(fā)者工具，把項(xiàng)目根目錄導(dǎo)入進(jìn)去。

4:但是，打開(kāi)微信開(kāi)發(fā)者工具的時(shí)候,會(huì)出現(xiàn)這樣的報(bào)錯(cuò)。

?

?

5：點(diǎn)擊右上角詳情
勾選不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS 版本以及 HTTPS 證書(shū)

?

?

6：查看項(xiàng)目如下，這個(gè)時(shí)候一個(gè)項(xiàng)目就可以跑起來(lái)了，研究項(xiàng)目結(jié)構(gòu)，仔細(xì)查看每個(gè)模塊的代碼，慢慢的就可以做一個(gè)mpvue小程序了。

?

?

可能會(huì)出現(xiàn)的錯(cuò)誤提示：mpvue踩坑-未找到入口 app.json 文件，或者文件讀取失敗，請(qǐng)檢查后重新編譯。這個(gè)時(shí)候，解決的方法已經(jīng)替你寫(xiě)好了，覺(jué)得很開(kāi)的的話(huà)那就給本菇?jīng)鲆粋€(gè)贊吧

原文作者：祈澈姑娘
90后前端妹子，愛(ài)編程，愛(ài)運(yùn)營(yíng)，愛(ài)折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題，堅(jiān)持記錄工作中所思所見(jiàn)，對(duì)于博客上面有不會(huì)的問(wèn)題，可以加入qq群聊來(lái)問(wèn)我：473819131.