一、快速創建一個mpvue項目
- 全局安裝 vue-cli
（如果有就不需要裝了）
- 創建一個基於mpvue-quickstart模板的新項目，記得選擇安裝vuex
vue init mpvue/mpvue-quickstart mpvue-demo
是否需要vuex →是
- 安裝fly
npm i flyio --save
- 安裝依賴
cd mpvue-demo cnpm i
- 啟動
npm run dev
有時候Npm run dev會報很多error，刪除node_modules重新安裝依賴即可
- 這是我們生成的Mpvue目錄
二、編寫頁面，還原
當我們寫組件的時候，和小程序有很多屬性和方法在vue是識別不出來的，有的有對應的屬性和方法
- 表單
- checkbox、radiobox、switch
<checkbox-group/>中選中項發生改變是觸發change事件，mp.detail={value:[選中的checkbox的value數組]}
其中開關選擇器switch、radio用法相同
划重點：1. bindchange鞋城@change="" 2.change返回選中值獲取方法為e.mp.detail.value
- 圖片上傳和預覽
圖片上傳和預覽的實現主要使用了微信原生API wx.chooseImage(OBJECT) wx.previewImage(OBJECT)
- 組件
- picker
bindchange →@change,以及一下要綁定的屬性要寫成:value的形式
可以通過indexPicker的值從而可以自定義picker初始化要顯示的值
- swiper
屬性和事件：除了bind改為了@之外，其他用法基本一樣
（還有其他一些組件，待整理...）
三、vuex，flyio請求服務
mpvue請求服務，我們用flyio插件進行處理
由於需要登錄傳token的操作，所以需要對flyio進行一次請求封裝
在api.js文件調用fly請求服務
在main.js引入store
import store from './store'
Vue.prototype.$store = store
然后我們就可以在vue中使用vuex一樣編寫代碼了
以日志列表為例
大功告成～～～
現在我們看子組件是怎么編寫的
看看顯示的頁面
接下來就需要我們改改樣式就行了。
