5.6 element ui
Element UI
官网: Element - The world's most popular Vue UI framework
ui库可以更具自己的需要选择学习,经典的ElementUI 后起的antd 都非常优秀.
本博客讲解Element UI. 因为更容易入手.并且在很多项目中被使用到. 比如 RuoYi.
Element UI 被广泛认为是最早流行并产生深远影响的 Vue UI 框架之一，可以说是 Vue 生态中最早的成熟桌面端 UI 库。
- 发布时间：2016 年 3 月
- 开发团队：饿了么前端团队（ElemeFE）
- GitHub 首次提交：2016 年 3 月（GitHub 仓库）
- 支持版本：Vue 2.x
- 特点：专为中后台系统设计，组件丰富，文档完善，中文友好。
👉 意义：
- 它是第一个系统化、工程化、文档完整的 Vue UI 框架。
- 极大地推动了 Vue 在国内企业级项目中的 adoption（采用率）。
- 成为后来许多 Vue UI 库的“参考标准”。
主要特性
| 特性 | 说明 |
|---|---|
| 优雅的设计风格 | 遵循“一致、反馈、效率、控制”的设计原则，界面简洁现代，适合企业级应用。 |
| 🧩 丰富的组件 | 提供超过 60 个高质量 UI 组件，如表格（Table）、表单（Form）、对话框（Dialog）、导航菜单、标签页、通知提示等。 |
| 🌐 国际化支持 | 内置多语言支持（中文、英文、西班牙语等），可轻松切换语言。 |
| 🎛️ 主题定制 | 支持通过 SCSS 变量自定义主题颜色、字体、边距等。 |
| 📱 响应式设计 | 组件支持响应式布局，适配不同屏幕尺寸（但主要面向 PC 端）。 |
| 💻 表格强大 | el-table 是其明星组件，支持固定列、排序、筛选、分页、树形数据、虚拟滚动（需扩展）等复杂功能。 |
| 🧪 类型支持 | 原生不支持 TypeScript（因基于 Vue 2），但在 Vue 2 项目中可通过 .d.ts 文件部分支持。 |
| 📚 文档完善 | 中文文档非常详细，示例丰富，上手简单。 |
核心组件与功能
- 布局组件
- Container容器：包含el-container（外层容器）、el-header（顶栏）、el-aside（侧边栏）、el-main（主区域）、el-footer（底栏），支持垂直或水平排列子元素，快速搭建页面基本结构。
- Layout栅格：借鉴Bootstrap思想，将页面分为24列，通过el-row和el-col的span属性控制列宽，实现响应式布局。
- 数据展示组件
- Table表格：支持展示结构化数据，提供排序、筛选、自定义操作等功能，适用于大量数据的高效呈现。
- Pagination分页：当数据量过多时，可分页展示数据，提升页面加载效率。
- 交互组件
- Dropdown下拉菜单：可折叠动作或菜单，支持点击/hover触发、分割列表等配置。
- NavMenu导航菜单：实现页面导航功能，支持水平/垂直模式及多级菜单。
- Tabs标签页：用于切换不同内容区域，提升页面空间利用率。
- 表单组件
- Form表单：集成Input、Select、Checkbox、DatePicker等控件，通过el-form和el-form-item构建表单域，支持rules属性实现数据校验。
- Button按钮：提供primary、success、danger等类型，支持plain（素色）、round（圆角）等样式设置。
- 反馈组件
- Message消息提示：用于操作后的主动反馈，如成功、错误提示等。
- Tooltip工具提示：鼠标悬停时显示额外信息，增强界面交互友好性。
应用场景
Element UI广泛应用于企业级后台管理系统、数据可视化平台等场景，其丰富的组件和简洁的API设计能显著提升开发效率，减少重复工作。
快速体验
全部引入
- 安装依赖
npm install element-ui --save
- 在 main.js 中全局引入
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});
按需引入
- 安装必要依赖
npm install element-ui --save
npm install babel-plugin-component -D
- 配置 babel.config.js (若无此文件需新建)
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}]]
}
- 在组件中按需引入 (以 Button 和 Select 为例)
// ... existing code ...
<script>
import { Button, Select } from 'element-ui';export default {components: {'el-button': Button,'el-select': Select},// ... existing code ...return{// ... existing code ...}
}
</script>
// ... existing code ...
Element UI 安装后，源码就存放在项目的 node_modules 目录中。
- 打开你的项目文件夹（包含
package.json）。 - 在 VSCode 的资源管理器中，展开：
node_modules → element-ui - 查看关键目录：
lib/：编译后的 JavaScript 文件（用于生产环境）。packages/和src/：源码目录（未编译的.vue和.js文件，含组件实现）。- 例如：
packages/components/button/src下的button.vue就是按钮组件的源码。
- 例如：
types/：TypeScript 类型定义（如果使用 TS）- 样式源码路径：
element/
├── packages/
│ └── theme-chalk/ # 主题样式源码目录
│ ├── src/ # SCSS 源文件
│ │ ├── button.scss # 按钮样式
│ │ ├── input.scss # 输入框样式
│ │ ├── table.scss # 表格样式
│ │ └── ... # 其他组件样式
│ ├── mixins/ # SCSS 混合（mixin）
│ ├── common/ # 通用样式（重置、字体等）
│ └── themes/ # 主题变量（可定制）