接下來。。。。。

1. 初始化一個 mpvue 專案

現代前端開發框架和環境都是需要 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 許可權的
$ npm install --global [email protected]
 


# 4. 建立一個基於 mpvue-quickstart 模板的新專案
# 新手一路回車選擇預設就可以了
$ vue init mpvue/mpvue-quickstart my-project

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

隨著執行成功的回顯之後，可以看到本地多了個 dist 目錄，這個目錄裡就是生成的小程式相關程式碼。

2. 搭建小程式的開發環境

這一步比較簡單，按照提示一步步安裝好就行，然後用微信掃描二維碼登陸。 至此小程式的開發環境差不多完成。

3. 除錯開發 mpvue

選擇 小程式專案

• 專案目錄：就是剛剛建立的專案目錄（非 dist 目錄）
• AppID：沒有的話可以點選體驗“小程式”，隻影響是否可以真機除錯。
• 專案名稱。

如圖：

點選“確定”按鈕後會跳到正式的開發頁面，點選“編輯器”按鈕，關閉自帶的小程式編輯器。然後如圖：

此時，整個 mpvue 專案已經跑起來了。

用自己趁手的編輯器（或者IDE）開啟 my-project 中的 src 目錄下的程式碼試試，如示例：

到此，上手完畢。

4. 分包機制 2018.7.23+

mpvue-loader 1.1.2-rc.2 之後，優化了 build 後的檔案生成結構，生成的目錄結構保持了原始檔夾下的目錄結構，有利於對分包的支援。

5. webpack 配置

注意事項

1. 新增的頁面需要重新 npm run dev 來進行編譯

專案開發，更新中。。。

按上面的步驟建立的專案，新建頁面的時候是要建一個資料夾

但是用下面 github的專案已經建立好的，是單獨的一個檔案就行，和之前vue的頁面一樣

詳細 請看