Element UI入门指南：从零开始学习 – wiki基地

作者： /

Element UI 入门指南：从零开始学习

欢迎来到 Element UI 的世界！如果你是 Vue.js 开发者，正苦于构建美观、一致且高效的企业级用户界面，那么 Element UI 无疑是你强大的助力。它是一套由饿了么前端团队开发的、基于 Vue 2.x 的桌面端组件库，以其简洁优雅的设计、丰富的组件和友好的 API 赢得了广大开发者的青睐。

本篇文章将带你从零开始，一步步深入了解和使用 Element UI。无论你是否有前端组件库的使用经验，都能通过本指南快速掌握 Element UI 的核心概念和基本用法，为你构建复杂的应用程序打下坚实基础。

第一章：初识 Element UI – 为什么选择它？

在深入学习之前，让我们先回答一个基本问题：什么是 Element UI，以及我们为什么要选择它？

1. 什么是 Element UI？

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.x 的桌面端组件库。它提供了一系列预先构建好的 UI 组件，例如按钮、输入框、表格、对话框、导航等等。你可以像搭积木一样，将这些组件组合起来，快速搭建出功能完备且界面统一的后台管理系统或其他桌面应用。

2. 为什么选择 Element UI？

市面上有很多优秀的 Vue 组件库，如 Ant Design Vue、iView (View UI) 等，Element UI 之所以能脱颖而出，主要得益于以下几点：

  • 一致的设计风格： Element UI 拥有一套精心设计的视觉规范，所有组件都遵循这套规范，使得你的应用界面看起来更加专业和统一，无需花费大量时间在基础的样式设计上。
  • 丰富的组件库： 提供了日常开发中绝大多数常用的 UI 组件，覆盖从基础表单、数据展示到复杂的导航、通知等多种场景，极大地提高了开发效率。
  • 友好的 API 和详细文档： Element UI 的组件 API 设计直观易懂，每个组件都有详细的文档说明、属性、事件和插槽，以及丰富的示例，方便开发者查阅和使用。
  • 基于 Vue.js： 与 Vue.js 框架深度集成，充分利用了 Vue 的组件化、响应式数据绑定等特性，使得组件的使用和管理更加便捷。
  • 活跃的社区支持： 作为国内应用广泛的组件库之一，Element UI 拥有庞大的用户群体和活跃的社区，遇到问题时很容易找到解决方案或获得帮助。
  • 国际化支持： 内置了多语言支持，方便开发面向不同国家和地区用户的应用。
  • 主题定制能力： 提供了灵活的主题定制方案，可以根据品牌或项目需求轻松修改组件的样式。

总而言之，Element UI 能够帮助开发者将精力集中在业务逻辑的实现上，而不是重复造轮子或纠结于繁琐的 UI 样式细节，从而显著提升开发效率和产品质量。

第二章：前置知识 – 在开始之前你需要了解什么？

Element UI 是建立在 Vue.js 之上的。因此，在学习 Element UI 之前，你需要对 Vue.js 有一定的基础了解。这包括但不限于：

  • Vue 实例和生命周期： 了解 Vue 应用的创建过程以及各个生命周期钩子的作用。
  • 模板语法： 掌握 Vue 的模板语法，如插值 {{ }}、指令 v-bind (缩写 :)、v-on (缩写 @)、v-if、v-for、v-model 等。
  • 组件基础： 理解 Vue 组件的概念，如何定义、注册和使用组件，以及组件间的父子通信（通过 props 和 events）。
  • 计算属性 (Computed) 和侦听器 (Watch): 了解它们在响应式数据处理中的作用。
  • 对 ES6+ 语法有基本了解： 如箭头函数、Promise、模块导入/导出 (import/export) 等，这些在 Vue CLI 或 Vite 项目中会经常用到。
  • 基本的 HTML, CSS 和 JavaScript 知识： 这些是前端开发的基础。

如果你对以上概念还不够熟悉，建议先暂停，花一些时间学习 Vue.js 的官方文档或相关教程。扎实的 Vue 基础将让你学习和使用 Element UI 的过程更加顺畅。

第三章：第一步 – 环境准备与安装

现在，让我们开始动手搭建环境并安装 Element UI。

1. 准备开发环境

首先，你需要安装 Node.js（建议使用 LTS 版本），它包含了 npm（包管理器）。你可以从 Node.js 官网下载并安装。

安装完成后，你可以通过以下命令检查 Node.js 和 npm 是否安装成功：

bash
node -v
npm -v

2. 创建 Vue 项目

Element UI 通常应用于基于 Vue CLI 或 Vite 构建的现代 Vue 项目中。

  • 使用 Vue CLI (适用于 Vue 2 或 Vue 3):
    如果你还没有安装 Vue CLI，先全局安装它：
    bash
    npm install -g @vue/cli
    # 或者使用 yarn
    yarn global add @vue/cli
    然后创建一个新的 Vue 项目：
    bash
    vue create my-element-project
    在创建过程中，选择 Vue 2 的预设或手动配置，确保包含 Babel 等选项。

  • 使用 Vite (适用于 Vue 3，但也可配合插件支持 Vue 2):
    Vite 是一个更现代、更快的构建工具。要使用 Vite 创建 Vue 项目：
    bash
    npm init vue@latest # 根据提示选择项目名和配置
    # 或者使用 yarn
    yarn create vue@latest
    # 或者使用 pnpm
    pnpm create vue@latest
    进入项目目录并安装依赖：
    bash
    cd my-element-project
    npm install # 或 yarn install 或 pnpm install
    注意： Element UI v2.x 版本主要支持 Vue 2。如果你创建的是 Vue 3 项目，你可能需要寻找 Element UI 的 Vue 3 兼容版本（如 Element Plus，但 Element Plus 的 API 和 Element UI v2.x 有所不同，本文主要讲解 v2.x）。确保你创建的项目是基于 Vue 2 的。

为了与 Element UI v2.x 兼容，建议使用 Vue CLI 创建 Vue 2 项目。

3. 安装 Element UI

进入你的项目目录，通过 npm 或 yarn 安装 Element UI：

“`bash
cd my-element-project
npm install element-ui –save

或者使用 yarn

yarn add element-ui –save
“`

--save 标志会将 Element UI 添加到你的项目依赖中。

4. 引入 Element UI

安装完成后，你需要将 Element UI 引入到你的 Vue 应用中。有两种主要的方式：

  • 完整引入： 将 Element UI 的所有组件和样式全部引入。这种方式简单方便，适合初学者或项目较小的情况。

    在项目的入口文件（通常是 src/main.js 或 src/main.ts）中进行如下配置：

    “`javascript
    import Vue from ‘vue’;
    import App from ‘./App.vue’;
    import ElementUI from ‘element-ui’;
    import ‘element-ui/lib/theme-chalk/index.css’; // 引入 Element UI 样式

    Vue.config.productionTip = false;

    Vue.use(ElementUI); // 全局注册 Element UI 组件

    new Vue({
    render: h => h(App),
    }).$mount(‘#app’);
    “`

    这种方式的优点是无需关心哪些组件被使用，直接 Vue.use(ElementUI) 即可。缺点是会打包所有组件的代码和样式，即使你的应用只使用了其中一小部分，导致最终的应用体积较大，加载速度可能受到影响。

  • 按需引入： 只引入你实际使用的组件。这是大型项目或注重性能的项目推荐的方式。它可以显著减小打包后的文件体积。

    按需引入需要借助 Babel 插件 babel-plugin-component。

    首先安装它：
    “`bash
    npm install babel-plugin-component -D

    或者使用 yarn

    yarn add babel-plugin-component -D
    ``-D` 表示安装为开发依赖 (devDependencies)。

    然后，修改你的 Babel 配置文件 (babel.config.js 或 .babelrc)。如果你使用的是 Vue CLI 3+，通常是 babel.config.js：

    javascript
    module.exports = {
    presets: [
    '@vue/cli-plugin-babel/preset'
    ],
    // 添加 plugins 数组
    plugins: [
    [
    "component",
    {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
    }
    ]
    ]
    };
    这个配置告诉 Babel 在编译时，遇到 import { Button, Select } from 'element-ui' 这样的语句时，会自动将其转换为按需引入的方式，并且会自动引入对应组件的样式文件。

    接着，在 src/main.js 或 src/main.ts 中，按需引入你需要的组件并全局注册：

    “`javascript
    import Vue from ‘vue’;
    import App from ‘./App.vue’;
    import {
    Button, // 引入 Button 组件
    Select, // 引入 Select 组件
    // …其他你需要的组件
    } from ‘element-ui’;
    // 按需引入样式，babel-plugin-component 会自动处理，这里通常不需要手动引入全部样式文件
    // import ‘element-ui/lib/theme-chalk/index.css’; // 如果使用了 babel-plugin-component，这行通常可以移除

    Vue.config.productionTip = false;

    // 全局注册按需引入的组件
    Vue.component(Button.name, Button);
    Vue.component(Select.name, Select);
    // …注册其他组件

    // 如果需要引入原型上的方法，比如 $message, $notify, $msgbox 等，需要单独引入并挂载
    import {
    Message,
    MessageBox,
    Notification
    } from ‘element-ui’;

    Vue.prototype.$message = Message;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$notify = Notification;

    new Vue({
    render: h => h(App),
    }).$mount(‘#app’);
    “`

    按需引入是推荐的方式，虽然配置稍微复杂一点，但对应用性能有显著提升。在开发阶段，你可以先使用完整引入快速上手，项目进入稳定阶段后再切换到按需引入进行优化。

    运行项目： 安装并引入 Element UI 后，运行 npm run serve (或 yarn serve) 启动开发服务器，你应该不会看到任何错误。

第四章：初识组件 – 如何使用？

Element UI 的核心是组件。每个组件都是一个独立的 Vue 组件，你可以像使用普通的 Vue 组件一样在模板中使用它们。

1. 组件的基本结构

Element UI 组件通常以 el- 开头命名（例如 el-button, el-input, el-table）。在 Vue 模板中，你可以直接使用它们作为标签：

“`html

“`

2. Props – 配置组件的行为和外观

Element UI 组件通过 props 来接收父组件传递的数据，从而配置自己的行为和外观。你可以通过 v-bind 或其缩写 : 来向组件传递 props。

例如，el-button 组件有很多 props，如 type (按钮类型，如 primary, success, danger 等), size (按钮大小), disabled (是否禁用) 等。

“`html

“`

3. Events – 响应用户的交互

组件通常会触发事件来通知父组件发生了什么（例如用户点击了按钮）。你可以通过 v-on 或其缩写 @ 来监听这些事件，并在父组件中执行相应的方法。

例如，el-button 组件会触发 @click 事件：

“`html

“`

4. Slots – 定制组件的内容

有些组件需要插入一些内容，而这些内容不是固定的，由使用者决定。这时就用到 slots（插槽）。Element UI 组件广泛使用了插槽来提供灵活性。

例如，el-dialog (对话框) 组件通常有默认插槽用于放置对话框的主体内容，以及名为 footer 的插槽用于放置对话框底部的按钮：

“`html

“`

注意这里的 :visible.sync 是一个 Vue 的语法糖，等价于 :visible="dialogVisible" @update:visible="val => dialogVisible = val"。它常用于需要由子组件内部修改父组件传递的 prop 的场景，Element UI 的 Dialog, Drawer 等组件常用此方式来控制显示状态。

掌握了 Props, Events 和 Slots 这三个核心概念，你就掌握了使用绝大多数 Element UI 组件的方法。接下来，我们将通过一些常用组件的例子来加深理解。

第五章：深入学习常用组件

Element UI 提供了上百个组件，本章将介绍一些你在日常开发中会频繁使用到的核心组件及其基础用法。

1. 布局容器 (Container)

用于构建页面基本布局。包括 el-container, el-header, el-aside, el-main, el-footer。

“`html

``
注意，当子元素中包含el-header或el-footer时，el-container会垂直布局；当子元素中包含el-aside时，el-container会水平布局。你也可以通过direction` prop 强制设置布局方向。

2. 布局栅格 (Grid)

基于行（row）和列（column）的响应式栅格系统，用于创建页面布局。使用 el-row 和 el-col。

“`html

``spanprop 指定列的宽度，总共 24 份。gutter` 指定列之间的间距。

3. 按钮 (Button)

最常用的组件之一，用于触发操作。

“`html

``
通过type,size,plain,round,circle,disabled,loading,icon` 等 props 来定制按钮的样式和状态。

4. 输入框 (Input)

用于用户输入文本。

“`html

``
使用v-model进行双向数据绑定，type指定输入类型（text, textarea），placeholder设置占位符，clearable添加清空按钮，prefix-icon/suffix-icon添加前后缀图标，show-password` 用于密码框等。

5. 选择器 (Select)

用于从选项列表中选择一个或多个值。

“`html

``v-model绑定选中的值，options数组提供选项数据。el-option组件通过v-for遍历生成，key是唯一的标识，label是显示文本，value是选中后绑定的值。multiple` prop 开启多选模式。

6. 表格 (Table)

用于展示结构化数据。是 Element UI 中功能非常丰富的组件。

“`html

``el-table的:dataprop 绑定表格的数据数组。每个el-table-column定义一列，prop指定对应数据对象的哪个属性，label是列头显示的文本，width` 可设置列宽。表格还有排序、过滤、选择、展开行等高级功能，建议查阅官方文档学习。

7. 消息提示 (Message)

用于页面顶部显示全局的提示消息。

“`html

``
Message 通常不是一个组件，而是通过 Vue 的原型方法 (Vue.prototype.$message) 来调用。你需要确保在 main.js 中正确引入并挂载了它（如前文按需引入部分所示）。调用时可以传入字符串作为消息内容，也可以传入配置对象设置消息类型 (type: success, warning, info, error)、持续时间 (duration`)、是否显示关闭按钮等。

8. 对话框 (Dialog)

在当前页面打开一个模态窗口，用于显示重要信息或收集用户输入。

“`html

``:visible.sync控制对话框的显示/隐藏。title设置标题。width设置宽度。before-close可以在对话框关闭前执行一个函数，常用于确认用户是否要关闭。slot=”footer”` 用于定制底部按钮区域。

这只是 Element UI 丰富组件库中的一小部分。其他常用的组件还包括 Radio (单选框), Checkbox (多选框), Switch (开关), DatePicker (日期选择器), TimePicker (时间选择器), Pagination (分页), NavMenu (导航菜单), Tabs (标签页), Tree (树形控件) 等等。学习这些组件的最佳方式是查阅官方文档，动手实践每个组件的示例代码。

第六章：主题定制与样式覆盖

Element UI 的默认主题是 “theme-chalk”，简洁优雅。但有时你可能需要根据项目或品牌的特定需求进行主题定制，或者对个别组件的样式进行微调。

1. 主题定制

Element UI 使用 SCSS (Sass) 作为样式开发语言，并且通过 SCSS 变量来控制主题样式。主题定制的核心思想就是覆盖这些默认的 SCSS 变量。

基本步骤：

a. 安装 SCSS 相关的加载器： 如果你的项目还没有安装，需要安装 sass, sass-loader, node-sass (或 sass) 等依赖。
bash
npm install sass-loader node-sass --save-dev
# 或者使用 yarn
yarn add sass-loader node-sass --dev
注意：node-sass 可能安装失败，可以尝试使用兼容性更好的 sass 库代替 node-sass。

b. 创建一个新的 SCSS 文件： 例如 src/styles/element-variables.scss。
在这个文件中，你可以复制 Element UI 默认主题变量文件 (node_modules/element-ui/packages/theme-chalk/src/common/var.scss) 中的变量，然后修改你需要改变的值。
例如：
“`scss
/ src/styles/element-variables.scss /

/* 改变主题色变量 */
$--color-primary: #409EFF !default; // Element UI 的默认主色
// 覆盖为你的品牌色
$--color-primary: #007bff; // Bootstrap 的主色为例

/* 改变成功色变量 */
$--color-success: #67C23A !default;
$--color-success: #28a745; // Bootstrap 的成功色为例

/* 改变按钮圆角 */
$--button-border-radius: 4px !default;
$--button-border-radius: 0px; // 移除圆角

/* ... 更多变量 ... */

// 最后，必须引入 Element UI 默认的样式文件
// 这里会使用你上面定义的变量来编译 Element UI 的样式
@import "~element-ui/packages/theme-chalk/src/index";
```
你可以在 Element UI 的 `node_modules/element-ui/packages/theme-chalk/src/common/var.scss` 文件中找到所有可定制的变量。

c. 在入口文件引入你的定制样式文件：
修改 src/main.js 或 src/main.ts，用你的定制样式文件替换 Element UI 默认样式文件的引入：
“`javascript
import Vue from ‘vue’;
import App from ‘./App.vue’;
import ElementUI from ‘element-ui’;
// import ‘element-ui/lib/theme-chalk/index.css’; // 注释或删除这行
import ‘./styles/element-variables.scss’; // 引入你的定制样式文件

Vue.config.productionTip = false;

Vue.use(ElementUI);

// ...其他原型挂载

new Vue({
  render: h => h(App),
}).$mount('#app');
```
重新启动开发服务器，你应该就能看到应用了新主题色的 Element UI 组件了。

Element UI 官方还提供了一个命令行工具 element-theme 和在线主题生成器，可以更方便地生成和管理主题，但对于入门阶段，手动覆盖变量是理解其原理的直接方式。

2. 局部样式覆盖

有时你只需要修改某个组件在特定页面或组件内的样式，而不是全局修改主题。你可以直接在你的 .vue 文件中的 <style> 标签内编写 CSS 来覆盖 Element UI 组件的默认样式。

需要注意的是，如果你在 <style> 标签上使用了 scoped 属性，它会给你的样式添加一个唯一的属性选择器，防止样式泄露。但这也可能导致无法直接覆盖 Element UI 组件内部元素的样式（因为那些内部元素没有你的组件的 scoped 属性）。

解决办法是使用深度选择器：

  • Vue CLI 项目 (使用 less/sass): 使用 /deep/ 或 >>>
  • Vue CLI 项目 (使用 css): 使用 >>> (推荐使用 Sass/Less)

示例：修改 el-button 在某个组件内的背景色（假设按钮有类名 my-button）：

“`html

``
深度选择器/deep/或>>>` 会穿透 scoped 样式的作用域，从而选中 Element UI 组件的内部元素并应用样式。

第七章：实际应用与最佳实践

学习了基础和常用组件后，如何将它们应用到实际项目中并遵循一些最佳实践呢？

1. 构建复杂组件

你的页面通常由多个 Element UI 组件和其他自定义组件组合而成。例如，一个登录表单可能由 el-form, el-form-item, el-input, el-button 等组件构成。通过合理地组织和嵌套组件，可以构建出复杂的 UI 界面。

2. 表单验证

Element UI 的 el-form 和 el-form-item 组件提供了强大的表单验证功能。你可以在 el-form 上通过 rules prop 设置验证规则，在 el-form-item 上通过 prop 指定需要验证的字段，然后调用 el-form 的 validate 方法进行整体验证。

“`html

``
通过:rules定义验证规则对象，规则中可以配置是否必填 (required)、消息 (message)、触发方式 (trigger: blur 失焦或 change 值改变)、长度限制 (min,max) 等。在需要触发表单验证的地方，通过this.$refs.表单ref名称.validate()` 方法执行验证。

3. 响应式设计

虽然 Element UI 主要面向桌面端，但其栅格系统 el-row 和 el-col 提供了基础的响应式能力。你可以通过 el-col 的不同屏幕尺寸对应的 props (如 sm, md, lg, xl) 来设置在不同断点下的列宽、偏移、排序等，实现简单的响应式布局。对于更复杂的响应式需求，可能需要结合媒体查询或其他技术。

4. 性能优化

  • 按需引入： 如前所述，这是减小打包体积最重要的一步。
  • 懒加载路由： 结合 Vue Router 的路由懒加载，只在需要时加载对应页面的组件及其依赖的 Element UI 组件。
  • 虚拟列表/虚拟表格： 对于需要展示大量数据的表格或列表，考虑使用虚拟列表技术（Element UI 官方 Table 组件在处理海量数据时性能可能成为瓶颈），只渲染可视区域内的元素，提高页面性能。
  • 合理使用组件： 避免在同一个页面渲染过多隐藏的、复杂的组件。

5. 利用好官方文档

Element UI 的官方文档是最好的学习资源。当你遇到问题或想了解某个组件的更多功能时，查阅文档是最快、最准确的方式。文档中不仅有组件的 API 说明，还有丰富的示例，可以直接复制代码进行尝试。

第八章：进阶之路与资源推荐

恭喜你已经掌握了 Element UI 的基础知识和常用组件的使用。Element UI 的世界远不止于此，你可以继续深入学习：

  • 更多组件： 探索官方文档中你尚未使用的组件，如 Upload (上传), Progress (进度条), Carousel (走马灯), Calendar (日历) 等，了解它们的功能和用法。
  • 高级用法： 学习表格的自定义列模板、可编辑单元格、树形数据展示；学习表单的自定义校验规则；学习 Tree 组件的懒加载和节点操作等。
  • 国际化 (i18n): 如果你的应用需要支持多语言，Element UI 内置了国际化方案，学习如何配置和使用。
  • 无障碍访问 (a11y): 了解 Element UI 在无障碍访问方面做出的努力以及如何在使用中提高应用的可访问性。
  • 组件源码： 如果你有兴趣，可以阅读 Element UI 组件的源码，学习其内部实现原理，这对于提升你的 Vue 组件开发能力非常有帮助。
  • Element Plus： 如果你的项目是基于 Vue 3，或者计划升级到 Vue 3，那么你需要转向学习 Element Plus，它是 Element UI 的 Vue 3 版本，API 有些变化，但设计理念和大部分组件是相似的。

推荐资源：

  • Element UI 官方文档 (v2.x): https://element.eleme.cn/#/zh-CN (或搜索 “Element UI” 找到官网)
  • Element Plus 官方文档 (Vue 3): https://element-plus.org/zh-CN/
  • Vue.js 官方文档: https://cn.vuejs.org/ (学习 Vue 基础)
  • GitHub Element UI 仓库: 查看 Issues 和 Pull Requests，了解项目动态和常见问题。
  • 各大技术社区和论坛： CSDN, 稀土掘金, Stack Overflow 等，搜索 Element UI 相关问题和文章。

总结

Element UI 作为一套成熟、功能强大且美观的 Vue 组件库，极大地提高了前端开发效率，尤其是在构建企业级后台管理系统时。

本篇入门指南带你了解了 Element UI 的基本概念、安装与引入方式、组件的使用方法 (Props, Events, Slots)、常用组件的实例以及主题定制和样式覆盖的技巧。最重要的是，掌握了如何通过查阅文档来学习和解决问题。

学习是一个持续的过程，Element UI 的强大之处在于其丰富的组件和灵活的定制能力。从零开始，最重要的一步是动手实践。尝试在本指南的基础上，自己搭建一个简单的页面，使用不同的组件，修改它们的属性，监听事件，逐步深入。

祝你在 Element UI 的学习和使用旅程中一切顺利！利用好这个强大的工具，去构建令人惊艳的用户界面吧！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部