![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174518068-534451821.png)
一、快速创建一个mpvue项目
- 全局安装 vue-cli
(如果有就不需要装了)
- 创建一个基于mpvue-quickstart模板的新项目,记得选择安装vuex
vue init mpvue/mpvue-quickstart mpvue-demo
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174553139-1819493216.png)
是否需要vuex →是
- 安装fly
npm i flyio --save
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174608889-1359813166.png)
- 安装依赖
cd mpvue-demo
cnpm i
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174621538-1448847078.png)
- 启动
npm run dev
有时候Npm run dev会报很多error,删除node_modules重新安装依赖即可
- 这是我们生成的Mpvue目录
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174637403-1426718315.png)
二、编写页面,还原
当我们写组件的时候,和小程序有很多属性和方法在vue是识别不出来的,有的有对应的属性和方法
- 表单
- checkbox、radiobox、switch
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174738382-83757391.png)
<checkbox-group/>中选中项发生改变是触发change事件,mp.detail={value:[选中的checkbox的value数组]}
其中开关选择器switch、radio用法相同
划重点:1. bindchange鞋城@change="" 2.change返回选中值获取方法为e.mp.detail.value
- 图片上传和预览
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174751697-1031729961.png)
图片上传和预览的实现主要使用了微信原生API wx.chooseImage(OBJECT) wx.previewImage(OBJECT)
- 组件
- picker
bindchange →@change,以及一下要绑定的属性要写成:value的形式
可以通过indexPicker的值从而可以自定义picker初始化要显示的值
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174804471-24986638.png)
- swiper
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174833151-711730945.png)
属性和事件:除了bind改为了@之外,其他用法基本一样
(还有其他一些组件,待整理...)
三、vuex,flyio请求服务
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174845635-164464344.png)
mpvue请求服务,我们用flyio插件进行处理
由于需要登录传token的操作,所以需要对flyio进行一次请求封装
在api.js文件调用fly请求服务
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174857057-506251574.png)
在main.js引入store
import store from './store'
Vue.prototype.$store = store
然后我们就可以在vue中使用vuex一样编写代码了
以日志列表为例
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174907207-1397824160.png)
大功告成~~~
现在我们看子组件是怎么编写的
![](https://img2018.cnblogs.com/blog/1285010/201811/1285010-20181114174934933-1653655471.png)
看看显示的页面
![](https://img2018.cnblogs.com/blog/1285010/201810/1285010-20181008172750091-2056079704.png)
接下来就需要我们改改样式就行了。