基於mpvue搭建小程序項目框架

mpvue官網文檔

1、安裝開發環境和工具

一、安裝開發環境

具體參考《安裝Node.js和npm》。

二、安裝開發工具

2.1 微信開發者工具

這個工具是開發、調試和模擬運行微信小程序的最核心的工具。

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

2.2 Visual Studio Code

Visual Studio Code（簡稱vscode）是如今很是流行的一個輕量級代碼編輯器，擁有很是多好用的輔助開發插件，在個人文章中我都會使用這個編輯器來編輯代碼。固然，好用的代碼編輯器有不少，好比Sublime Text、WebStorm等，一樣能夠達到咱們的開發目的，你也儘管用你本身最喜歡的代碼編輯器來寫代碼就好了。

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

安裝完vscode後，在它的插件管理器中，查找Vetur並安裝，而後重啓一下vscode後，插件即生效：

Vetur是一款能夠提供Vue語法高亮、語法檢查和代碼快捷輸入等功能的插件，能夠爲咱們的開發過程提供不少便利。

2、基於mpvue搭建小程序項目框架

vue-cli是一個vue專用的項目腳手架工具，能夠用於方便的建立vue項目骨架代碼，包括咱們要講到的mpvue的項目代碼。咱們能夠經過安裝node.js后里麪包含的npm工具來安裝vue-cli，在命令行輸入以下命令：

# 全局安裝 vue-cli
npm install --global vue-cli

建立一個基於 mpvue-quickstart 模板的新項目

vue init mpvue/mpvue-quickstart my-project

命令行將一步步的引導咱們選擇或填寫項目的配置信息，若是你還不太明白這些內容的含義，能夠先直接所有按回車：

這個過程vue-cli主要是先從遠程的代碼倉庫中下載了一份註冊名爲mpvue/mpvue-quickstart的模板代碼，而後根據開發者在命令行提示過程當中輸入的信息，生成一份通過配置後的代碼。

這份代碼暫時還運行不起來，由於它還缺乏依賴的庫，咱們須要執行如下命令進行依賴庫的安裝：

# 安裝依賴
cd my-project
npm install

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

而後，執行命令讓這個代碼運行起來，進入開發模式：

# 啓動構建
npm run dev

成功運行後，這個項目代碼就進入開發模式，一旦有源代碼發生修改，就會觸發自動編譯。由於mpvue使用的是Vue + HTML Web的開發方式開發小程序，它最終仍是須要被轉換成小程序的代碼才能夠在小程序環境運行，因此這裏的自動編譯的目的就是要把Web代碼編譯成小程序代碼。編譯後的代碼會在dist目錄下：

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

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

項目目錄選擇指向my-project目錄：

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

參考

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