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

08-14

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

來自專欄猿論6 人贊了文章

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