elementui框架

Element UI 框架概述

Element UI 是基于 Vue.js 2.0 的桌面端组件库，由饿了么前端团队开发。它提供了丰富的 UI 组件（如表格、表单、弹窗等），设计风格简洁，文档完善，适合快速开发企业级中后台产品。

核心特性

• 组件丰富：包含按钮、表单、表格、导航、弹窗等 50+ 常用组件。
• 设计规范：遵循统一的视觉风格，支持按需引入和主题定制。
• 国际化：支持多语言切换，内置中文和英文。
• 响应式：适配主流桌面浏览器（Chrome、Firefox、Safari 等）。

安装与使用

通过 npm 或 yarn 安装：

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

在 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-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

表单验证：

rules: {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
}

主题定制

通过 SCSS 变量覆盖默认样式：

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

注意事项

• 兼容性：Element UI 仅支持 Vue 2.x，Vue 3.x 需使用 Element Plus。
• 维护状态：官方已停止维护 Element UI，建议新项目迁移至 Element Plus。

资源链接

• 官网：Element UI
• GitHub：ElemeFE/element
• 社区支持：可通过 Issue 或论坛提问。