mpvue上手教程
阿新 • • 發佈：2018-08-30
div 微信小程序開發 升級 小程序開發 詳細 tar 輸出結果 ima bubuko
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文件夾！
導入進去就能看到下面的這個界面了：
mpvue上手教程