使用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 <kevin.zhang@moredist.com>
? 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開發小程序教程（二）