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