elementui package

ElementUI 简介

ElementUI 是一套基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并维护。它提供了丰富的 UI 组件（如按钮、表单、表格等），适合快速开发中后台管理系统。

安装方法

通过 npm 或 yarn 安装：

npm install element-ui --save
# 或
yarn add element-ui

引入方式

完整引入（适合快速原型开发）：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需引入（推荐，减少打包体积）：
需配合 babel-plugin-component 使用：

npm install babel-plugin-component --save-dev

在 babel.config.js 中配置：

module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

按需引入组件示例：

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

主题定制

1. 通过 SCSS 变量覆盖
   新建 SCSS 文件（如 element-variables.scss）：

   $--color-primary: #ff4500; /* 修改主题色 */
   @import "~element-ui/packages/theme-chalk/src/index";

   在项目入口文件中引入该文件。

2. 在线主题生成工具
   使用官方 主题生成器 下载定制主题，替换默认 CSS 文件。

国际化支持

若需多语言支持，引入 LocaleProvider：

import lang from 'element-ui/lib/locale/lang/en';
import locale from 'element-ui/lib/locale';

locale.use(lang);

兼容性说明

• 支持 Vue 2.x 版本，不兼容 Vue 3.x（可考虑 Element Plus）。
• 现代浏览器及 IE 10+。

官方资源

• GitHub 仓库
• 官方文档

注意事项

• 按需引入时需确保 Babel 配置正确，避免样式丢失。
• 生产环境建议开启代码压缩和 Tree Shaking 优化打包体积。