vue移动端

小山羊~

于 2021-07-29 16:58:30 发布

阅读量195

点赞数

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/qq_21747731/article/details/119209595

版权

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Vue项目的源码目录设计，重点讲解了Vuex的状态管理和Vue Router的使用。Vuex的state用于存储SPA的共享数据，通过mapState提供了三种访问state的方式。同时，详细阐述了router的标签和属性，如<router-link>、<router-view>、<keep-alive>及其属性。还提及了路由的过渡动画和不同的过渡模式。此外，文章还涉及食物分类，但未深入展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、

项目源码目录设计

引入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:当前元素先进行过渡离开，离开完成后新元素过渡进入。

食物分类：