【筆記】實戰mpvue2.0多端小程序框架——mpvue入門

---

mpvue入門 | 「小慕讀書」官網

---

一、mpvue介紹

官網：http://mpvue.com/

• mpvue （github 地址）是一個使用 Vue.js 開發小程序的前端框架
• github 1.7w+ Star
• 2018年3月14日 Release 1.0.2版本，正式開源
• 2019年2月18日 Release 2.0.2版本，正式支持多端小程序
• mpvue與原生小程序開發對比：

對比項	原生小程序	mpvue
學習成本	高	低
IDE	不友好	友好
多端開發	工作量大	一套代碼
可複用性	低	高

二、搭建mpvue腳手架

第一步，基於mpvue-quickstart模板創建新項目

vue init mpvue/mpvue-quickstart my-project

第二步，安裝依賴和運行

cd my-project
npm install
npm run dev

mpvue開發需要我們預先安裝node.js環境，大家可以到node.js官網下載最新的穩定版本

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false	// 關閉生產模式下給出的提示
App.mpType = 'app'	// 爲了與小程序頁面組件區分開來

const app = new Vue(App)	// 實例化
app.$mount()			// 將整個頁面進行掛載

執行完npm run dev之後，在微信開發者工具中導入項目即可完成預覽

注：之後的開發幾乎都將在微信開發者工具外進行

三、mpvue原理

• mpvue保留了vue.runtime核心方法，無縫繼承了Vue.js的基礎能力
• mpvue-template-compiler提供了將vue的模板語法轉換到小程序的wxml語法的能力（在mpvue-loader中使用mpvue-template-compiler）
• 修改了vue的建構配置，使之構建出符合小程序項目結構的代碼格式：json/wxml/wxss/js文件

四、mpvue生命週期

Vue生命週期

小程序生命週期

小程序應用生命週期

小程序應用生命週期官網介紹：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object

小程序頁面生命週期

詳細內容見官網文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html