初始化一個 mpvue 項目

現(xiàn)代前端開發(fā)框架和環(huán)境都是需要 Node.js 的，如果沒有的話，請先下載 nodejs 并安裝。

然后打開命令行工具：

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于眾所周知的原因，可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 一般是要 sudo 權(quán)限的
$ npm install --global vue-cli

# 4. 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認(rèn)就可以了
$ vue init mpvue/mpvue-quickstart my-project
#這一步會讓你配置一些選項 其中需要配置你的小程序Appid

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

隨著運行成功的回顯之后，可以看到本地my-project文件夾根目錄中多了個 dist 目錄，這個目錄里就是生成的小程序相關(guān)代碼，通過微信小程序開發(fā)工具瀏覽到該目錄dist文件夾，在微信小程序開發(fā)工具上配置上你的Appid。

搭建小程序的開發(fā)環(huán)境

小程序自己有一個專門的微信開發(fā)者工具，最新版本下載地址。

這一步比較簡單，按照提示一步步安裝好就行，然后用微信掃描二維碼登陸。 至此小程序的開發(fā)環(huán)境差不多完成。

調(diào)試開發(fā) mpvue

選擇 小程序項目 并依次填好需要的信息：

項目目錄：就是剛剛創(chuàng)建的項目目錄（非 dist 目錄）
AppID：沒有的話可以點選體驗“小程序”，只影響是否可以真機調(diào)試。
項目名稱。

1.png

2.png

此時，整個 mpvue 項目已經(jīng)跑起來了。
用自己趁手的編輯器（或者IDE）打開 my-project 中的 src 目錄下的代碼試試。