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

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

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

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

?

?

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

 cnpm install

?

?

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

npm run dev

?

?

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

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

?

?

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

?

?

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

?

?

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

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