mpvue上手教程


mpvue官網上面已經有了詳細的步驟,把每個步驟截圖及輸出結果做個筆記,供各位看官參考參考~

1.全局安裝 vue-cli

$ npm install --global vue-cli

如果你已經設置好了淘寶鏡像,你也可以直接執行下面的語句:

$ cnpm install --global vue-cli

返回結果如下圖:

 

2.創建一個基於 mpvue-quickstart 模板的新項目

$ vue init mpvue/mpvue-quickstart my-project

返回結果如下圖:

 

 可以看到 生成了一個 my-project 的文件夾:

 

3.安裝依賴

$ cd my-project
$ npm install

 返回結果如下圖:

 

可以看到my-project文件夾目錄結構如下:

 

 

4.啟動構建

$ npm run dev

 執行完結果如下:

 

此時我們可以看到本地多了個 dist 目錄,這個目錄里就是生成的小程序相關代碼。

這一步小心會有個坑,就是返回結果提示你 No module ***,原因是npm和node的版本過低了,升級方案可以查看windows下npm和node如何升級這篇文章。

 

5.導入到微信小程序開發工具中

注意:是將整個my-project導入進去,而不是單個的dist文件夾!

導入進去就能看到下面的這個界面了:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM