前段時間，美團開源了mpvue這個專案，使得我們又多了一種用來開發小程式的框架選項。由於mpvue框架是完全基於Vue框架的（重寫了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由於受限於小程式環境本身的原因而不能使用），這給使用過Vue開發Web應用的前端開發者提供了極低的切換門檻來開發小程式。

如果之前還未曾用過Vue這個框架的話，建議你可以快速瀏覽一下Vue的官方文件(https://cn.vuejs.org/v2/guide/)，或者通過下面的幾個視訊教程來了解下Vue的基本用法。

Vue基礎教程視訊：
https://www.bilibili.com/video/av25142267

https://www.bilibili.com/video/av25143408
https://www.bilibili.com/video/av25144006
https://www.bilibili.com/video/av25148349
https://www.bilibili.com/video/av25148832
https://www.bilibili.com/video/av25649895

起手式：必要的開發環境

工欲善其事必先利其器！在開始寫程式碼之前，請確保你已經安裝了必要的開發環境和工具，以下是幾個必需的和可選的工具：

1）node.js
現在，前端工具鏈基本都依賴Node.js，所以請率先安裝它吧。

下載地址：https://nodejs.org/en/download/

安裝完成後，開啟你的命令列輸入如下命令，驗證安裝是否成功：

node --version
//成功的話輸出類似：v10.6.0

npm --version
//成功的話輸出類似：6.1.0

然後，我們需要執行以下命令，將npm的下載源切換到國內淘寶的映象，以提高下載時的速度和成功率：

npm set registry https://registry.npm.taobao.org/

2）vue-cli
vue-cli是一個vue專用的專案腳手架工具，可以用於方便的建立vue專案骨架程式碼，包括我們要講到的mpvue的專案程式碼。我們可以通過安裝node.js后里麵包含的npm工具來安裝vue-cli，在命令列輸入如下命令：

npm install vue-cli -g

安裝完成後，輸入如下命令進行驗證：

vue

// 成功的話會輸出如下內容：
// Usage: vue <command> [options]
//
// Options:
//
//    -V, --version  output the version number
//    -h, --help     output usage information
//
// Commands:
//
//    init           generate a new project from a template
//    list           list available official templates
//    build          prototype a new project
//    create         (for v3 warning only)
//    help [cmd]     display help for [cmd]

3）微信開發者工具
這個工具是開發、除錯和模擬執行微信小程式的最核心的工具了，所以必須安裝。

下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4）Visual Studio Code + Vetur
Visual Studio Code（簡稱vscode）是現在非常流行的一個輕量級程式碼編輯器，擁有非常多好用的輔助開發外掛，在我的文章中我都會使用這個編輯器來編輯程式碼。當然，好用的程式碼編輯器有很多，比如Sublime Text、WebStorm等，同樣可以達到我們的開發目的，你也儘管用你自己最喜歡的程式碼編輯器來寫程式碼就行了。

下載地址：https://code.visualstudio.com

安裝完vscode後，在它的外掛管理器中，查詢Vetur並安裝，然後重啟一下vscode後，外掛即生效：

安裝Vetur外掛

Vetur是一款可以提供Vue語法高亮、語法檢查和程式碼快捷輸入等功能的外掛，可以為我們的開發過程提供很多便利。

建立第一個基於mpvue的小程式專案程式碼

花了點時間裝好了必要的開發環境，下面我們就來建立我們的第一個mpvue小程式專案。這裡將用到前面已安裝的vue-cli：

vue init mpvue/mpvue-quickstart firstapp

命令列將一步步的引導我們選擇或填寫專案的配置資訊，如果你還不太明白這些內容的含義，可以先直接全部按回車：

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <[email protected]>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 小程式測試，敬請關注最新微信開發者工具的“測試報告”功能 

   vue-cli · Generated "firstapp".

   To get started:
   
     cd firstapp
     npm install
     npm run dev
   
   Documentation can be found at http://mpvue.com

這個過程vue-cli主要是先從遠端的程式碼倉庫中下載了一份註冊名為mpvue/mpvue-quickstart的模板程式碼，然後根據開發者在命令列提示過程中輸入的資訊，生成一份經過配置後的程式碼。

這份程式碼暫時還執行不起來，因為它還缺少依賴的庫，我們需要執行以下命令進行依賴庫的安裝：

cd firstapp 
npm install

經過幾分鐘的下載安裝，依賴庫安裝到了firstapp目錄下，你可以看到該目錄下多出了一個node_modules目錄。

然後，執行命令讓這個程式碼執行起來，進入開發模式：

npm run dev

成功執行後，這個專案程式碼就進入開發模式，一旦有原始碼發生修改，就會觸發自動編譯。因為mpvue使用的是Vue + HTML Web的開發方式開發小程式，它最終還是需要被轉換成小程式的程式碼才可以在小程式環境執行，所以這裡的自動編譯的目的就是要把Web程式碼編譯成小程式程式碼。編譯後的程式碼會在dist目錄下：

執行並檢視結果

上面的步驟中，我們開啟開發模式後，其實並不能看到小程式的執行效果，要真正看小程式的執行介面的話，我們還是要藉助微信開發者工具。

開啟微信開發者工具，選擇新增專案：

專案目錄選擇指向firstapp目錄：

點選“確定”按鈕，進入小程式開發主介面，在左邊的小程式模擬器中就能看到firstapp小程式的執行結果了：

【提醒】記得在微信開發者工具的選單》設定 》編輯設定 中，將“儲存時自動編譯小程式”勾選上，這樣當mpvue的程式碼自動編譯完成後，模擬器才會自動重新整理介面。

小結

本文先簡要介紹一下使用mpvue開發小程式的前期準備，在後面的文章中將一步步講解mpvue的詳細用法。

還沒累？那就讀下一篇吧，我已經寫好了：）

原作者連結：https://www.jianshu.com/p/6f8d74be3ff8