vue移动端

一、

 

项目源码目录设计

引入reset.css,在static/css/reset.css

vuex:

const state:访问状态对象，它就是SPA（单页面应用程序）中的共享值，

状态对象赋值给内部对象（也就是把store.js中的值，赋值给我们模板里data中的值）

有三种赋值方式：（读取state）

import {mapState} from 'vuex'

1. 通过computed的计算属性直接赋值

computed:{
    count(){
        return this.$store.state.count;
    }
}

2. 通过mapState的对象来赋值

 computed:mapState({
    count:state=>state.count
  }),

3. 通过mapState的数组来赋值

 computed:mapState(['count']),

router引入多了路由标签和属性： 

标签：<router-link/>, <router-view/>, <keep-alive/>

属性：route, router

路由的过渡动画：

 <transition name="fade">
    <router-view></router-view>
 </transition>

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

过渡模式mode：

in-out:新元素先进入过渡，完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

食物分类：