MpVue 致力打造H5與小程序的代碼共用

MpVue是什麼

基於 Vue.js 的小程序開發框架
從底層支持 Vue.js 語法和構建工具體系。

使用vue開發小程序

修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中

使用vue語法開發，編譯爲小程序語法

一套vue程序h5+小程序

Vue組件規範，熟悉vuejs便可開發小程序

比wepy工具對vue語法支持度更高

小程序的缺點

語法和html css不兼容，單獨開發
學習成本

MpVue的能力

完全的Vue組件化開發能力：提升代碼複用性

完整的vue開發體驗

完全的Vue組件化開發能力：提升代碼複用性

快捷的 webpack 構建機制：開發階段 hotReload

支持npm安裝依賴

使用 Vue.js 命令行工具 vue-cli 快速初始化項目

H5 代碼轉換編譯成小程序目標代碼的能力

MpVue入門

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 因爲衆所周知的緣由，能夠考慮切換源爲 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 通常是要 sudo 權限的
$ npm install --global vue-cli@2.9

# 4. 建立一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就能夠了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

MpVue目錄結構與講解

Vue生命週期+兼容小程序生命週期

Created 建立初始化

有一些vue不支持的就必須結合小程序自帶的API
例如 onPullDownRefresh

模板語法

動態style和class 使用計算屬性返回字符串

V-if和v-for用法不變

表單v-model全支持

事件處理

bind換成@ 使用vue的綁定語法    

模板

除了動態渲染，別的都支持    （v-html）

.vue單文件組件

小程序自帶組件也能夠用

自帶組件事件綁定也使用vue的，好比@click