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文件夾！

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