mpvue開發微信小程序

前段時間，美團開源了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 <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目錄下：

運行並查看結果

上面的步驟中，咱們開啓開發模式後，其實並不能看到小程序的執行效果，要真正看小程序的運行界面的話，咱們仍是要藉助微信開發者工具。

打開微信開發者工具，選擇新增項目：

項目目錄選擇指向firstapp目錄：

點擊「肯定」按鈕，進入小程序開發主界面，在左邊的小程序模擬器中就能看到firstapp小程序的執行結果了：

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