V3 升级

升级内容

element-plus 升级到 2.2.13
vite 升级到 2.3.7
图标替代为@element-plus/icons-vue，原图标不能再使用
国际化支持
使用 pinia 替代 vuex

从 v2 升级到 v3

安装[email protected]和[email protected]

  npm install element-plus@2.2.13 vite@2.3.7

修改src/main.js，增加以下代码

// 全局注册element-plus/icons-vue
import * as ICONS from "@element-plus/icons-vue";
Object.entries(ICONS).forEach(([key, component]) => {
  // app.component(key === 'PieChart' ? 'PieChartIcon' : key, component)
  app.component(key, component);
});

所有el-icon-xxx的图标都要改成@element-plus/icons-vue图标

<el-icon>
  <Edit />
</el-icon>
<el-button type="primary" icon="Edit"> 编辑 </el-button>

菜单图标配置规则

  // element-plus官方图标
  {
    path: '/dashboard',
    icon:'Dashboard',
  }

  // svg icon
  {
    path: '/xxx',
    icon:'icon-xxx', // 必须以“icon-”开头，代码中通过“icon-”判断svg icon
  }

修改src/assets/style/element-variables.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": $mainColor
    )
  )
);

@use "element-plus/theme-chalk/src/reset.scss" as *;
@use "element-plus/theme-chalk/src/index.scss" as *;

修改vite.config.js

// additionalData: '@import "./src/assets/style/global-variables.scss";',
// 改为:
additionalData: `@use "./src/assets/style/global-variables.scss" as *;`,

修改src/layout/components/Sidebar/Menus.vue和src/layout/components/Sidebar/Submenu.vue
```
将所有的el-submenu替换为el-sub-menu
```

修改src/layout/components/Sidebar/Item.vue
文件参考：

<template>
  <svg-icon class="icon" v-if="isCustomSvg" :name="icon" />
  <component :is="icon" v-else-if="!!icon" class="icon" />
  <span>{{ $t(title) }}</span>
</template>

<script>
  import { computed, defineComponent } from "vue";

  export default defineComponent({
    props: ["title", "icon"],
    setup({ icon }) {
      const isCustomSvg = computed(() => icon && icon.startsWith("icon-"));

      return {
        isCustomSvg,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .icon {
    margin-right: 10px;
    width: 16px !important;
    height: 16px !important;
    font-size: 16px;
    text-align: center;
    color: currentColor;
  }
</style>

修改src/layout/components/Topbar/Hamburger.vue
```
图标修改
```
修改src/layout/components/Topbar/Breadcrumbs.vue
删除以下样式：
```
::v-deep(.el-breadcrumb__item) {
  float: none;
}
```
修改src/layout/components/Tagsbar/index.vue
```
图标修改
```

修改src/layout/components/Tagsbar/hooks/useScrollbar.js
整体替换为：

import { ref } from "vue";

export const useScrollbar = (tagsItem) => {
  const scrollContainer = ref(null);
  const scrollLeft = ref(0);

  const doScroll = (val) => {
    scrollLeft.value = val;
    scrollContainer.value.setScrollLeft(scrollLeft.value);
  };

  const handleScroll = (e) => {
    const $wrap = scrollContainer.value.wrap$;
    if (
      $wrap.offsetWidth + scrollLeft.value >
      $wrap.children[0].scrollWidth
    ) {
      doScroll($wrap.children[0].scrollWidth - $wrap.offsetWidth);
      return;
    } else if (scrollLeft.value < 0) {
      doScroll(0);
      return;
    }
    const eventDelta = e.wheelDelta || -e.deltaY;
    doScroll(scrollLeft.value - eventDelta / 4);
  };

  const moveToTarget = (currentTag) => {
    const $wrap = scrollContainer.value.wrap$;
    const tagList = tagsItem.value;

    let firstTag = null;
    let lastTag = null;

    if (tagList.length > 0) {
      firstTag = tagList[0];
      lastTag = tagList[tagList.length - 1];
    }
    if (firstTag === currentTag) {
      doScroll(0);
    } else if (lastTag === currentTag) {
      doScroll($wrap.children[0].scrollWidth - $wrap.offsetWidth);
    } else {
      const el = currentTag.$el.nextElementSibling;

      el.offsetLeft + el.offsetWidth > $wrap.offsetWidth
        ? doScroll(el.offsetLeft - el.offsetWidth)
        : doScroll(0);
    }
  };

  return {
    scrollContainer,
    handleScroll,
    moveToTarget,
  };
};

修改.eslintrc.js，增加一行
```
'vue/script-setup-uses-vars': 'off',
```
国际化

请参考国际化页面升级
pinia

把 vuex 的代码改成 pinia，代码量比较大，建议新项目再使用 pinia。

Assets 2

29 Sep 07:23

huzhushan

V2.1.0

4437c69

V2.1.0 副版本升级

升级element-plus
升级sass
更新App.vue国际化配置
defaultSettings：重命名、增加menus.isShow
permission.js增加loading
permission.js删除所有动态路由
退出的时候清空标签栏和menus
tags增加清空标签栏的mutations
404页面路由修改
增加公共hooks
增加树形下拉组件
增加(按钮、组件等)权限控制自定义指令