(Vite-Vue-Admin)Vue3+vite+element-plus项目功能和问题总结

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）;动态图标使用  ；el-menu的index对应路由路径配置    

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"}]

      
        首页
        
          {{menuItem.first}}

        
        {{menuItem.second}}
      

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) => {
  // 要重新获取token
  const token = store.state.token.token;
  
  //注意这里的逻辑： 如果咩有token且路由不为/login则直接跳转到login页面
  // 如果路由存在且有token则直接到home页面否则直接next
  if (!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'