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 官方文档《自定义主题》，或者参考下面提供的最佳实践。
在
scss/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 *;// 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 *;修改
ts/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/目录中，并修改代码中的使用方式。 -
应用配置中导航栏填充风格的配置项名称变更
tsconst globalSettings: Settings.all = { menu: { /** * 留空默认 * radius 圆角 */ menuFillStyle: '', // 导航栏是否圆角 isRounded: false, }, }