使用mpvue開發小程序教程（一）

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

如果之前還未曾用過Vue這個框架的話，建議你可以快速瀏覽一下Vue的官方文檔(https://cn.vuejs.org/v2/guide/)

起手式：必要的開發環境

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

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是一款可以提供Vue語法高亮、語法檢查和代碼快捷輸入等功能的插件，可以為我們的開發過程提供很多便利。

創建第一個基於mpvue的小程序項目代碼

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

vue init mpvue/mpvue-quickstart firstapp

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

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <[e-mail]>
? 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目錄下：

講dist目錄在微信開發者工具中打開即可。

【提醒】記得在微信開發者工具的菜單》設置 》編輯設置 中，將“保存時自動編譯小程序”勾選上，這樣當mpvue的代碼自動編譯完成后，模擬器才會自動刷新界面。

 使用mpvue開發小程序教程（二）