ElementPlus已经发布啦

原创

吴大大哈哈 2024-04-02 14:43:06 博主文章分类：JavaScript ©著作权

文章标签 javascript webpack 前端 elementui App 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者吴大大哈哈的原创作品，请联系作者获取转载授权，否则将追究法律责任

迟来的更新。
Elemen UI 2.X重大改变。
Element Plus 发布了。

1、开发环境

如果您使用Vue CLI作为构建工具，请升级到最新版本，v4 和 v5 都可以。

网络包 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 的最低浏览器要求。

ElementPlus已经发布啦_前端

如果您想在低版本浏览器上正常使用 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等字体和图标大小修改等属性。