v4.0 更新介绍​

• 拥抱原子化 CSS ，启用 UnoCSS ，并对框架部分组件样式进行了重构

  如果你正在将老版本的业务代码向新版本迁移，推荐安装 UnoCSS 这个 VSCode 插件，它能高亮显示 UnoCSS 的代码。如果你的业务页面代码中定义的 class 和 UnoCSS 的 class 重名，也可以通过这个插件快速识别到并修改。

• 与 Element Plus 组件库解耦，方便替换成其他第三方 UI 组件库，详细可阅读：

  • 《替换为 Ant Design Vue》
  • 《替换为 Arco Design Vue》
  • 《替换为 Naive UI》
  • 《替换为 TDesign》
  • 《替换为 Vexip UI》

• ESLint 配置文件格式调整，详细可阅读《代码规范 - ESLint 配置》

  ESLint 提供了全新的配置方式，所有配置项将都在一个 eslint.config.js 文件中实现。

• 基础版现在可以使用 Iconify 完整图标库，详细可阅读《图标 - Iconify 图标》

• 全新的主题配色方案，详细可阅读《主题 - 框架主题》

• 移除 Element Plus 自定义主题配置

  如果你依旧需要自定义 Element Plus 的主题，可以阅读 Element Plus 官方文档《自定义主题》，或者参考下面提供的最佳实践。

  在 /src/assets/styles/ 目录下分别新建 element-plus.scss 和 element-plus.dark.scss 并写入下面的代码：

  scss

  // element-plus.scss
  @forward "element-plus/theme-chalk/src/common/var.scss" with (
    $colors: (
      "primary": (
        "base": green
      )
    )
  );
  @use "element-plus/theme-chalk/src/index.scss" as *;
  @use "./element-plus.dark.scss" as *;

  scss

  // element-plus.dark.scss
  @forward "element-plus/theme-chalk/src/dark/var.scss" with (
    $bg-color: (
      "page": #0a0a0a,
      "": #141414,
      "overlay": #1d1e1f,
    )
  );
  @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

  修改 /src/main.ts

  ts

  ...
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css' 
  import 'element-plus/theme-chalk/dark/css-vars.css' 
  import '@/assets/styles/element-plus.scss' 
  ...

• 移除应用配置中 Element Plus 默认尺寸的配置项

  如果你依旧需要全局配置 Element Plus 的默认尺寸，可以参考《Config Provider 全局配置》并在 /src/App.vue 中进行修改。

• 移除精灵图支持

  原有 /src/assets/sprites/ 目录中的图片，现在可以移动到 /src/assets/images/ 目录中，并修改代码中的使用方式。

• 应用配置中导航栏填充风格的配置项名称变更 

  ts

  const globalSettings: Settings.all = {
    menu: {
      /** 
      * 留空默认 
      * radius 圆角 
      */ 
      menuFillStyle: '', 
      // 导航栏是否圆角 
      isRounded: false, 
    },
  }