当前位置：首页 > 前端教程

elementui包

2026-01-12 15:57:17前端教程

关于Element UI

Element UI是一套基于Vue.js 2.0的桌面端组件库，由饿了么前端团队开发并开源。它提供了丰富的UI组件和交互设计，适合快速构建中后台管理系统或企业级应用。

核心特性

组件丰富：包含按钮、表单、表格、弹窗、导航等60+常用组件。
设计规范：遵循统一的视觉风格，支持自定义主题。
文档完善：提供中文/英文文档，示例代码可直接复用。
响应式支持：适配不同屏幕尺寸的设备。

安装方式

通过npm或yarn安装：

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

通过CDN引入：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

基本使用

在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);

主题定制

通过SCSS变量覆盖：


/* 修改主题变量 */
$--color-primary: #FF00FF;

/ 引入完整组件库样式 / @import "~element-ui/packages/theme-chalk/src/index";



2. 使用在线主题生成器：
访问[Element官方主题工具](https://element.eleme.io/#/zh-CN/theme)可可视化生成自定义主题。

### 兼容性说明

- 支持Vue 2.6+
- 不支持IE8及以下版本
- 移动端建议使用[Element Plus](https://element-plus.org/)（Vue 3版本）

### 相关资源

- GitHub仓库：https://github.com/ElemeFE/element
- 官方文档：https://element.eleme.io/
- 社区插件：可通过npm搜索`element-ui-`前缀的扩展插件

elementui包