Element UI是一套基于Vue的桌面端组件库，主要用于开发企业级中后台产品。

主要特点

• 组件丰富，功能完善
• 文档详尽，社区活跃
• 支持按需引入
• 主题可定制

基本使用

// 完整引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

// 按需引入
import { ElButton, ElSelect } from 'element-plus'
app.component(ElButton.name, ElButton)

按需加载

// babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'element-plus',
      customStyleName: (name) => {
        return `element-plus/lib/theme-chalk/${name}.css`
      }
    }]
  ]
}

主题定制

// 自定义主题变量
:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
}

主题管理

// 动态主题切换
const changeTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme)
}

组件封装

<!-- 基于UI框架的二次封装 -->
<template>
  <el-table
    v-bind="$attrs"
    :data="tableData"
    v-loading="loading"
  >
    <slot></slot>
  </el-table>
</template>