1.vite快速构建vue3项目 npm create vite@latest vite-vue-admin -- --template vue
2.element-plus三种引入方式(全局引入，按需引入，手动引入)
3.vue3引入路由
4.layout整体布局实现（header,aslide,main）
可以写一个公共的样式文件index.less
5.问题：设置整个高度为100%不生效：解决，不仅设置#app,还要设置html和body。
html,body,#app{margin: 0;padding: 0;height: 100%;}6.header图标使用
- element-plus的el-icon引入 npm install @element-plus/icons-vue；注意图标需要全局引入，或者配置按需引入;
- el-button中使用图标，最好在el-button下再引入el-icon或者svg图标好设置图标大小
- element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题。解决：需要使用
new URL(url, import.meta.url)特定图片处理方法(import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个JavaScript模块中，通过相对路径我们就能得到一个被完整解析的静态资源URL)
7.header右侧下拉菜单实现：el-dropdown;里面可以有表单然后包含处理方法
8.左侧菜单的初步实现（el-menu）;动态图标使用<component> ；el-menu的index对应路由路径配置
<el-icon><component class="icons" :is="item.icon"></component></el-icon>9.基础样式整理实现
10.vue3中如何使用vuex实现菜单折叠（vuex在setup中mapState等辅助函数用法）
const store = useStore();
const isCollapse = computed(() => store.state.layout.isCollapse);const collapseMenu = (isCollapse) =>{store.commit("layout/modifyCollapse",isCollapse);
}11.左侧路由跳转右侧展示相应组件的实现
12.home组件左侧动态实现
13.vue3本地mock和线上fastmock的使用（本地：一定要引入mock.js文件到main.js）
14.二次封装axios的原因及实现：请求封装，线上fastmock，
- 三个环境的配置(vite获取环境变量
import.meta.env.MODE)：导出的config包括当前环境；三个环境配置根据当前环境的返回；全局mock设置 - Mock总开关和单个接口自定义开关（便于接口调试和联调）：isMock是mock是否使用线上mock控制的总开关，如果这里设置true，后面单个接口可以不设置，如果想单独设置false也可以在具体接口中设置，在后续联调时好一次性修改
- 判断是线上环境不能使用mock ，使用线上api
- 注意属性值method不是methods
15.Home组件右侧上面数据的展示：el-card用户信息，购买数据显示
16.注意布局格式：el-row和el-col
17.Home组件右侧echarts表格的渲染
- 获取数据折线图，柱状图，拼图数据，并设置option的基本配置
- 获取数据：重点在接口数据获取后，数据的重新组装，xAxis.data和series数据不对，就显示不出来
- Setup中获取proxy方法类似于this
- 折线图：x轴数据，series数据，type通过过去的数据设置进去（根据echarts 官网），echarts.init()方法，参数必须是真实的DOM元素
- 柱状图：
- 饼图
18.面包屑的实现：breakcrumb vuex
问题：setup中使用vuex辅助函数?
首页一直显示，其他分级显示
less样式穿透:deep()
多级菜单可以设置多个属性：
menuItem: [{first: "其他", second: "页面1"}] <el-breadcrumb separator="/"><el-breadcrumb-item class="root" :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item v-if="menuItem.first && menuItem.first!=='首页'"><a href="/">{{menuItem.first}}</a></el-breadcrumb-item><el-breadcrumb-item v-if="menuItem.second">{{menuItem.second}}</el-breadcrumb-item></el-breadcrumb>19.tags标签展示及切换
tags标签的删除(删除后高亮显示逻辑)
Tag显示和删除，高亮显示，tag实现步骤
el-tag tag为home时不能删除
左侧菜单点击时，tag显示
点击tag进行路由跳转
关闭tag ，取length 关闭后索引减一且vuex中数据删除
删除当前跳转后一个，删除最后一个跳转前一个
element-plus的el-tag标签关闭标签时的高亮显示逻辑-CSDN博客
20.use组件table数据的展示：用户管理用本地mock实现，因为有增删改查
用户管理分页实现
分页样式处理
用户搜索的实现
用户新增UI实现
用户新增数据实现
渲染，分页，点击某页时数据更新
分页样式，
21.计算表格高度，用calc计算高度用于动态计算长度值。
用户搜索
用户新增：dialog，新增完成后，关闭弹窗，提示，重置表单，刷新表单数据，重置表单需要有prop属性，重置表单不生效？日期处理;
setup()函数中emit的用法：
setup(props,context) {const dialogVisible = props.dialogVisible;// 关闭弹窗const handleClose = done => {context.emit("closeDialog", false);}
}
新增用户表单验证：新增和编辑共用组件；title处理：变量区分；编辑时数据通过插槽传入；
22.浅拷贝对编辑数据进行处理Object.assign；？
23.点击后再点新增新增窗口有值？通过nextTick进行处理
主要通过Object.assign()对userForm数据进行浅拷贝，并且通过nextTick()方法使浅拷贝的数据立即生效
// 打开用户编辑窗口const openEditDialog = row => {dialogVisible.value = true;type.value = "edit";proxy.$nextTick(() => {Object.assign(userForm.value, row);});};
用户编辑实现第一步
用户编辑实现第二步
删除用户
24.登录静态页面实现
登录后左侧菜单数据不一样，菜单显示不同
菜单数据app里面调用，每次登录都要获取
登录后返回左侧菜单的列表
存储到vuex中的aside组件显示出来
解决数据持久化问题
import createPersistedState from 'vuex-persistedstate'const store = createStore({modules:{layout,token},plugins: [createPersistedState()]
});
25动态路由实现（重点）
登录后需要调用menu数据，然后根据menu数据动态设置路由数据
路由里面通过循环路由数据生成动态路由
router.addRoute()
问题：路由重复？ 动态路由设置在app.vue里面刷新时有问题
动态路由配置总结：vue3动态路由配置总结-CSDN博客
登出功能实现
26.路由守卫实现（路由拦截逻辑）
token设置，获取，清楚，通过js-cookie进行设置
没有token且路由不为login
登录以后用错误路由地址栏回车：路由匹配，获取到路由用当前路由进行匹配
否则进行跳转
// 路由守卫中再次设置路由（此时是在地址栏直接回车时处理）
store.commit("layout/setDynamicRoutes", router);// 判断路由在配置的动态路由中是否存在，不存在则跳转到home，存在则直接跳转
const checkRouter = (path) =>{let hasCheck = router.getRoutes().filter(item=>item.path == path).length;if (hasCheck) {return true} else {return false}
}router.beforeEach((to, from, next) => {// 要重新获取tokenconst token = store.state.token.token;//注意这里的逻辑： 如果咩有token且路由不为/login则直接跳转到login页面// 如果路由存在且有token则直接到home页面否则直接nextif (!token && to.path !== '/login') {next('/login');// 否则检查路由是否存在，不存在直接跳转home页面}else if(!checkRouter(to.path)){next('/main');}else {// 存在则直接跳转next();}
});27.api封装中实现请求拦截后ElMessage弹窗处理信息，发现ElMessage样式错误
如果要再非vue组件中使用element-plus组件且有样式需要组件和样式文件一起引入（这种情况配置了按需引入也没用）
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
