elementui是
Element UI 简介
Element UI 是一套基于 Vue.js 2.0 的桌面端组件库,由饿了么前端团队开发并开源。它提供了丰富的 UI 组件(如按钮、表单、表格、弹窗等),帮助开发者快速构建企业级中后台产品。
核心特点
- 组件丰富:覆盖常用交互场景,包括表单、导航、数据展示等。
- 设计规范:遵循一致的视觉风格,适合中后台系统。
- 高度可定制:支持主题配置,可通过 SCSS 变量修改样式。
- 文档完善:提供中文文档和示例,降低学习成本。
安装与使用
通过 npm 安装:

npm install element-ui -S
在 Vue 项目中引入(全局注册):
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
按需引入(推荐):

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
常见组件示例
按钮组件:
<el-button type="primary">主要按钮</el-button>
表单组件:
<el-form :model="formData">
<el-form-item label="用户名">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form>
主题定制
- 通过
theme-chalk的 SCSS 变量修改:$--color-primary: #ff4500; /* 修改主题色 */ - 使用在线主题生成工具(Element Theme)。
注意事项
- 仅支持 Vue 2.x,Vue 3.x 需使用 Element Plus。
- 国际化需额外引入
locale文件。 - 部分复杂组件(如表格)需结合文档调整功能。
如需更多示例或 API 细节,可参考 官方文档。






