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);主题定制
-
通过 SCSS 变量覆盖
新建 SCSS 文件（如element-variables.scss）：$--color-primary: #ff4500; /* 修改主题色 */ @import "~element-ui/packages/theme-chalk/src/index";在项目入口文件中引入该文件。
-
在线主题生成工具
使用官方 主题生成器 下载定制主题，替换默认 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+。
官方资源
注意事项
- 按需引入时需确保 Babel 配置正确，避免样式丢失。
- 生产环境建议开启代码压缩和 Tree Shaking 优化打包体积。
