迟来的更新。
Elemen UI 2.X重大改变。
Element Plus 发布了。
1、开发环境
如果您使用Vue CLI作为构建工具，请升级到最新版本，v4 和 v5 都可以。
网络包 4
如果你使用 Webpack 4 作为你的构建工具，请考虑下面的代码。
// webpack.config.js module.exports = { resolve: { extensions: ['.ts', '.js', '.mjs', '.json'], }, module: { rules: [ { test: /\.mjs$/i, include: /node_modules/, type: 'javascript/auto', }, ], }, }
网络包 5
如果你使用 Webpack 5 作为你的构建工具，请考虑下面的代码。
// webpack.config.js module.exports = { resolve: { extensions: ['.ts', '.js', '.mjs', '.json'], }, module: { rules: [ { test: /\.mjs$/i, resolve: { byDependency: { esm: { fullySpecified: false } } }, }, ], }, }
2、兼容性
下表显示了 Element Plus 的最低浏览器要求。
如果您想在低版本浏览器上正常使用 Element Plus，请手动使用Babel、ESBuild或其他转换工具并导入相应的 polyfill。
值得注意的是 Element Plus 使用ResizeObserver，需要导入resize-observer-polyfill。有关详细信息，请参阅ResizeObserver 兼容性。有关详细信息，请参阅文档。
3、安装
局部配置
Element Plus 的导入路径与 Element UI 不同。请考虑下面的代码。更多方法请参考安装文档
import ElementPlus from 'element-plus' import 'element-plus/theme-chalk/index.css' // If you need to import the SCSS version, please use the following code (please use the latest version of Sass) // import 'element-plus/theme-chalk/src/index.scss'
全局配置
全局配置Vue.prototype.$ELEMENT已被删除，请考虑下面的代码。
import { createApp } from 'vue' import ElementPlus from 'element-plus' import App from './App.vue' createApp(App) .use(ElementPlus, { // options }) .mount('#app')
或者使用config-provider 组件，请考虑下面的代码。
4、设计
组件尺寸系统从默认/中/小/迷你切换到大/默认/小。default将是默认大小，large如果您需要增加它，请使用它，或者使用它small来减小大小。Padding方面，优化为更通用的4px系统，以4/8 px为原子单位，控制整个系统的padding一致性。即大组件的padding也大，小组件的padding也小。
涉及的主要组件有Button、Radio、Checkbox、Input、Select、DatePicker、Form、Table、Tag等具有大小属性的组件。
主要涉及padding和margin属性修改，font-size等字体和图标大小修改等属性。
更新内容只是列出了部分。
github地址：https://github.com/element-plus/element-plus/discussions/5657
