写在前面：最近学了mpvue，就把自己的一些心得体会写出了，会有很多不足之处，还望多多提出意见。
首先我们要先了解一下mpvue的特殊性：mpvue中既支持vue的生命周期也支持原生小程序的生命周期，但一般不要使用小程序的生命周期。不能在页面中通过const app =getApp()获取到app.vue中的数据，为了实现数据的调用我们使用的是vuex进行的数据状态管理，当然了还有其他的一些，在做mpvue项目主要用的开发工具是：vscode+小程序开发者工具（编辑器其他的也可以）；技术主要用的有vuex+mpvue+flyio，大概就这些了
原生和mpvue区别
1.mpvue中对vue-router的支持不好，问题较多
2.进行页面跳转的是可使用小程序提供的Api
(1)wxnavigateTo() 保留当前页面，可回退
（2）wx.redirectTo()不保留，不能后退
（3）wx.switchTab()使用于tabBar页面
3.axios
(1)小程序中不支持使用axios，会报错
原因：小程序的环境和浏览器的环境不一样
解决办法：使用其他库：flyio
原生小程序和mpvue对比总结
1.原生小程序运行更稳定些，兼容性好，mpvue可能在某些方面存在兼容性问题（vue-router）
2.mpvue支持vue组件化开发，效率会更高，功能更强大（双向数据绑定，vuex）
3.mpvue可基于webpack组件化，工程化开发
4.原生不支持npm安装包，不支持css预处理
5.支持computed计算属性和watcher监听器；模板语法中只支持简单的js表达式。可以直接写div、span等标签。
6.注册事件时用的@tap="事件名（）"， vue.js中事件的回调可以不用加括号调用，但是需要传递参数的时候需要加括号，括号里写需要传递的参数
新建项目
1.全局安装：npm install -g vue-cli
2.创建一个基于mpvue-quickstart模板的新项目：vue init mpvue/mpvue-quickstart my_project
3.cd my_project
4.安装依赖： npm install
5.运行：npm run dev
主要目录如下：
datas--数据 pages--页面 store--数据管理 app.json--跟小程序app.json差不多 app.vue--写一些公共样式 main.js设置当前组件类型，生成应用实例，挂载应用实例
pages下是每个页面的内容；每一个页面或者页面组件创建一个文件夹，例如：detail.vue(有三部分template (页面搭建) script（数据、时间处理） style（样式处理）)；main,js( 注册页面， 一个页面是需要main.js的,抽出来的组件是不需要main.js的)，main,json(设置页面导航栏及其他样式)
store下action.js和mutations.js和vue中的一样；mutation-type.js是用来设置mutation中 函数的类型 ，state.js存放数据，store.js是为了说明使用vuex,,暴露出vuex的核心对象，然后把store对象放到Vue的原型上，为的是每个实例都可以使用，这样就可以实现数据共享
index页面
页面效果如下：
详细代码：
<div class="indexContainer">
<img v-if="isShow" class="index_img" :src="userInfo.avatarUrl" alt="">
<Button class="btn" v-else open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户登录的信息</Button>
<p class="userName">hello {{userInfo.nickName}}</p>
<div @tap="toDetail" class="goStudy">
<p>小程序之旅</p>
</div>
</div>
</template>
<script>
export default{
data(){
return{
userInfo:{},
isShow:false//没授权
}
},
//除特殊情况以外，不建议使用小程序的生命周期
beforeMount(){
console.log("beforeMount")
//获取用户的登录信息
this.handleGetUserInfo();
},
methods:{
//获取用户登录信息
handleGetUserInfo(){
wx.getUserInfo({
success:res=>{
console.log(res,"用户信息")
//更新data中的数据
this.userInfo = res.userInfo;
this.isShow = true
},
fail:() =>{
console.log("获取失败");
}
})
},
getUserInfo(data){
if(data.mp.detail.rawData){
//说明用户授权
this.handleGetUserInfo();
}
},
toDetail(){
wx.navigateTo({
url:'/pages/list/main'
})
console.log("toDetail")
}
}
}
</script>
后续持续更新，首次发表文章，结构不太完美请见谅！
