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

...
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/ 目录中，并修改代码中的使用方式。

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

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

v4.0 更新介绍 ​

v4.0 更新介绍