開發流程
上一篇已經部署好需要的開發工具和環境了，這篇就以一個demo來說明編寫代碼和編譯的流程。
首先打開MPVue官方五分鐘上手文檔，然後照着文檔裡面一步一步來,檢查那些這裡就不試了，這裡直接建一個demo。
我們這裡要建立一個工程名為demo的項目，打開cmd指令，然後輸入如下指令：
vue init mpvue/mpvue-quickstart demo
稍等片刻就會幫我們建構一個demo的項目，這時候要輸入
- 項目的名字，輸入demo
- 輸入小程式的appid,因為這裡是測試不是真項目，不填直接回車
- 項目描述不填，回車
- 開發者，作者不填，回車
- Vue build 回車
- 使用Vuex?這裡不使用，填寫N然後回車
- 使用ESLint檢查代碼格式和文法，為了減少麻煩，這裡填寫N然後回車
- 最後回車建構demo項目，vue-cli會先從遠端的代碼倉庫中下載下傳了一份注冊名為mpvue/mpvue-demo的模闆代碼，然後根據開發者在指令行提示過程中輸入的資訊，生成一份經過配置後的代碼。
? Project name demo
? wxmp appid touristappid
? Project description A Mpvue project
? Author Administrator <[email protected]>
? Vue build runtime
? Use Vuex? No
? Use ESLint to lint your code? No
? 小程式測試，敬請關注最新微信開發者工具的“測試報告”功能
vue-cli · Generated "demo".
To get started:
cd demo
npm install
npm run dev
Documentation can be found at http://mpvue.com
上面輸入完後，這份代碼暫時還運作不起來，因為它還缺少依賴的庫，我們需要執行以下指令進行依賴庫的安裝(上面其實已經提示步驟怎麼操作了)：
cd 到你demo項目的目錄，因為我怕demo是放在C槽下，是以我的操作如下
C:\Users\Administrator>cd C:\Users\Administrator\demo
C:\Users\Administrator\demo>
然後
C:\Users\Administrator\demo>npm install
等待下載下傳安裝，依賴庫安裝到了demo目錄下，你可以看到該目錄下多出了一個node_modules目錄。
經過上面一頓操作後在執行指令讓這個項目運作起來，進入開發模式：
C:\Users\Administrator\demo>npm run dev
成功運作後，這個項目代碼就進入開發模式，一旦有源代碼發生修改，就會觸發自動編譯。因為mpvue使用的是Vue + HTML Web的開發方式開發小程式，它最終還是需要被轉換成小程式的代碼才可以在小程式環境運作，是以這裡的自動編譯的目的就是要把Web代碼編譯成小程式代碼。編譯後的代碼會在dist目錄下：
最後我們打開我們編寫代碼工具visual studio code，然後檔案–>打開檔案夾，選擇剛剛生成的項目，如下
目錄
1）package.json檔案
package.json是項目的主配置檔案，裡面包含了mpvue項目的基本描述資訊、項目所依賴的各種第三方庫以及版本資訊、以及可執行的腳本資訊。
2）project.config.json檔案
project.config.json檔案是用于管理微信開發者工具的小程式項目的配置檔案，其中記錄了小程式的appid、代碼主目錄、以及編譯選項等等資訊，在微信開發者工具中導入小程式項目的時候主要是通過該配置檔案讀取和寫入配置資訊。
3）static目錄
static目錄可以用于存放各種小程式本地靜态資源，如圖檔、文本檔案等。代碼中可通過相對路徑或絕對路徑進行通路， 如：
<img src="/static/button.png" />
<img src="../../../static/button.png" />
4）build目錄
build目錄下是一些用于項目編譯打包的node.js腳本和webpack配置檔案。一般情況下不需要修改這些檔案加粗樣式
5）config目錄
config目錄下包含了用于開發和生産環境下的不同配置，dev.env.js用于開發環境，prod.env.js用于生産環境，你可以将開發階段和生産階段不一樣的資訊（如背景API的url位址等）配置到這兩個檔案中去，然後在代碼中以變量的形式進行引用。
5）src目錄
src目錄是我們主要進行小程式功能編寫的地方。預設生成的demo代碼為我們建立了幾個子目錄：components、pages和utils，還有2個檔案：App.vue和main.js。其實它們都不是必須的，可以按照自己的風格進行定義和配置。不過預設建立的這個結構基本上是一個約定俗成的結構了，比較易于了解，是以我們可以遵循這個結構進行開發。
- components：在實際開發中，我們可以盡量将界面上可複用的部分，提取成vue元件放入該目錄
- pages：存放小程式的頁面。請遵循每個小程式頁面放入一個單獨子目錄的組織形式
- utils：可選（可删）。可以将代碼中一些公用工具函數組織成子產品放入該目錄下
- 可建立其他目錄，存放你希望組織起來的代碼。比如公用的業務邏輯代碼、請求背景API的代碼等等
- main.js + App.vue：這兩個是入口檔案，相當于原生小程式架構中的app.json和app.js的複合體。
代碼編寫
我們先用微信官方開發者工具打開剛剛已經編譯的小程式項目，如下
導入後項目如下圖
然後我們在visual studio code裡打開的工程裡添加一個按鈕，如下圖
因為之前我們已經進入開發者模式，也就是在cmd目錄輸入了npm run dev，會幫我們時時編譯轉換成小程式代碼，然後我們切換到小程式編輯器就可以看到如下多出了一個按鈕
至此流程就結束了，剩下的就是編寫代碼了。