Kagerou

一.基本页面 这里使用vue3,所以在script上添加setup语法糖，style上加上lang="scss"(这里踩了一个坑，如果使用sass的话会报错，因为scss是sass3引入进来的，scs

一.用户组件初步搭建 router的index.js中增加user的路由： 创建User.vue组件后，改变hash值查看是否成功： 页面结构： 实现效果： 二.用户表格数据的获取和渲染 我们需要在D

一.CountData数据获取 api.js:增加getCountData() mock.js中进行拦截： 在home.js中添加数据： Home.vue组件中增加CountData： 二.Count

一.两个小的优化 调整侧边栏收缩的流畅度，在el-menu下增加： el-card的阴影： 二.左下方表格的实现 设置tableData和tableLabel的数据： 把数据渲染到表格中：（先新建一个

一.首页左上方的卡片实现 在index.js中增加home的路由： 增加Home组件： 在Main中把主页换成： 实现效果： 编辑Home页面： 增加一个user-card，编辑样式： 实现效果：

一.引入pinia 组件间数据共享，现在要解决的是侧边栏折叠展开问题，我们要在Header组件中点击一个按钮，然后侧边栏组件就会就会进行折叠或者展开，这就涉及到组件间的传值问题，我们可以设置一个值定义

一. vue3使用element-Plus 有三种引入方法 第一种 完整引入： main.js: App.vue: 第二种： 自动导入 vite.config: 这里我使用的是第一种完整引入 二. 引

启动vite项目 2.配置 引入样式文件，把样式文件放到asset文件夹中 路由的创建 实现Main组件 在App.vue中加入Main组件，用router-view的方式 最终的结果就是这样啦：

class，style绑定 字符串写法，类名不确定 实现点击随机切换颜色 数组写法：类名不确定，个数不确定 对象写法：个数确定，名字确定 style绑定 对象写法 条件渲染 v-show 结构还在 v