Element UI 教程：从安装到项目实战 – wiki基地

作者： /

Element UI 教程：从安装到项目实战的深度指南

前言

在现代 Web 开发中，尤其是在构建管理后台、企业级应用或复杂数据驱动的界面时，一个高效、美观且功能丰富的 UI 组件库至关重要。Vue.js 作为当前最流行的前端框架之一，拥有庞大的生态系统，而 Element UI (现主要指 Element Plus for Vue 3, 但本教程以广泛使用的 Element UI for Vue 2 为基础，概念同样适用于 Element Plus) 则是其中最为耀眼的明珠之一。它由饿了么前端团队开源，提供了一套完整、高质量的桌面端组件，极大地提升了开发效率和用户体验。

本教程旨在为初学者和有一定 Vue.js 基础的开发者提供一份详尽的 Element UI 指南，涵盖从环境准备、安装配置到核心组件使用，最终通过一个实战项目，巩固所学知识，让你能够自信地在自己的项目中使用 Element UI。

第一章：准备工作与环境搭建

在开始 Element UI 之旅前，请确保你的开发环境满足以下基本要求：

  1. Node.js 和 npm/yarn: Element UI 的安装和项目构建依赖于 Node.js 环境。请访问 Node.js 官网 (https://nodejs.org/) 下载并安装稳定版本（LTS）。安装 Node.js 时会自动包含 npm (Node Package Manager)。你也可以选择使用 yarn 作为包管理工具。可以通过在终端输入 node -v 和 npm -v (或 yarn -v) 来验证安装是否成功。
  2. Vue CLI: Vue CLI 是 Vue.js 官方提供的脚手架工具，能快速生成标准的 Vue 项目结构。如果尚未安装，请在终端运行：
    bash
    npm install -g @vue/cli
    # 或者
    yarn global add @vue/cli
    安装完成后，通过 vue --version 验证。
  3. Vue.js 基础知识: 本教程假设你已具备基本的 Vue.js 知识，包括但不限于：组件、模板语法、数据绑定 (v-model)、事件处理 (@click 等)、计算属性、生命周期钩子等。

第二章：安装与配置 Element UI

将 Element UI 集成到 Vue 项目中有多种方式，最常用的是通过 Vue CLI 插件或手动引入。

方式一：使用 Vue CLI 插件（推荐）

如果你使用 Vue CLI 3 或更高版本创建项目，这是最简单、最推荐的方式。

  1. 创建 Vue 项目: 如果还没有项目，先创建一个：
    bash
    vue create my-element-app
    根据提示选择配置（推荐选择 Manually select features，并确保勾选 Babel, Router, Vuex 等基础项，选择 Vue 2 版本）。

  2. 进入项目目录:
    bash
    cd my-element-app

  3. 添加 Element UI 插件:
    bash
    vue add element
    执行此命令后，Vue CLI 会询问一些配置选项：

    • Import component on demand? (Y/n): 是否按需引入组件？强烈推荐选择 Y (Yes)。按需引入可以显著减小最终打包体积，只打包用到的组件及其样式。
    • Choose the locale you want to load: (en/zh-CN/…) 选择默认语言。根据需要选择，例如 zh-CN。

    插件会自动完成以下工作：
    * 安装 element-ui 依赖。
    * 如果选择按需引入，会安装 babel-plugin-component 并配置 babel.config.js。
    * 在 src/plugins/element.js (或类似文件) 中配置 Element UI 的引入和全局设置。
    * 在 src/main.js 中引入并使用该插件配置文件。

方式二：手动安装与完整引入

如果你不想使用插件，或者在现有项目中集成，可以选择手动安装。

  1. 安装 Element UI:
    bash
    npm install element-ui -S
    # 或者
    yarn add element-ui

  2. 在 main.js 中引入并注册:
    “`javascript
    import Vue from ‘vue’;
    import ElementUI from ‘element-ui’;
    import ‘element-ui/lib/theme-chalk/index.css’; // 引入 Element UI 的核心样式
    import App from ‘./App.vue’;
    import router from ‘./router’; // 假设你使用了 Vue Router
    import store from ‘./store’; // 假设你使用了 Vuex

    Vue.config.productionTip = false;

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

    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount(‘#app’);
    “`
    这种方式会加载 Element UI 的所有组件和样式，简单直接，但打包体积会比较大。

方式三：手动安装与按需引入

为了优化性能，手动配置按需引入是更好的选择。

  1. 安装 Element UI: (同方式二)
    bash
    npm install element-ui -S

  2. 安装 babel-plugin-component:
    bash
    npm install babel-plugin-component -D
    # 或者
    yarn add babel-plugin-component -D

  3. 配置 babel.config.js (或 .babelrc):
    javascript
    module.exports = {
    presets: [
    '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
    [
    "component",
    {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk" // 注意是 theme-chalk
    }
    ]
    ]
    };

  4. 在 main.js 中按需引入所需组件:
    “`javascript
    import Vue from ‘vue’;
    import {
    Button,
    Select,
    Input,
    Dialog,
    Form,
    FormItem,
    Table,
    TableColumn,
    Pagination,
    Message, // Message 组件需要全局挂载
    MessageBox // MessageBox 组件需要全局挂载
    // … 其他你需要使用的组件
    } from ‘element-ui’;
    import App from ‘./App.vue’;
    import router from ‘./router’;
    import store from ‘./store’;

    Vue.config.productionTip = false;

    // 注册你需要的组件 (可以注册全局，也可以在具体组件内局部注册)
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Input);
    Vue.use(Dialog);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);

    // 对于 Message 和 MessageBox，需要挂载到 Vue 原型上
    Vue.prototype.$message = Message;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;

    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount(‘#app’);
    ``
    注意：虽然配置了    babel-plugin-component，理论上它会自动处理样式引入，但有时可能需要手动在main.js中引入基础样式或特定组件样式（根据官方文档指引）。通常，使用vue add element` 插件能更好地处理这些细节。

第三章：Element UI 核心概念与常用组件

Element UI 提供了极为丰富的组件，覆盖了 Web 应用开发的方方面面。理解其核心概念和掌握常用组件是高效开发的关键。

核心概念：

  • 组件化: Element UI 的一切都是组件。通过标签 <el-component-name> 的形式在模板中使用。
  • Props: 通过 Props 向组件传递数据和配置。例如 <el-button type="primary"> 中的 type 就是一个 Prop。查阅官方文档了解每个组件支持的 Props。
  • Events: 组件通过 $emit 触发事件，父组件通过 @event-name 监听。例如 <el-button @click="handleClick">。
  • Slots: 允许向组件内部插入自定义内容。例如 <el-dialog title="提示"><span>这是一段信息</span></el-dialog> 中的 <span> 就插入到了默认插槽。有些组件提供具名插槽（Named Slots）用于更精细的内容分发。
  • 样式与主题: Element UI 使用 BEM (Block, Element, Modifier) 命名规范，方便理解和覆盖样式。默认主题是 theme-chalk。支持主题定制。
  • 全局配置: 可以在 Vue.use(ElementUI, { size: 'small', zIndex: 3000 }); 时传入配置对象，进行全局尺寸、弹窗层级等的设置。
  • 国际化 (i18n): 内置支持多语言，可以通过配置轻松切换。

常用组件详解 (选取代表性组件):

  1. Layout 布局 (el-row, el-col):

    • 基于 Flexbox 实现的栅格系统，用于页面布局。
    • el-row 代表行，el-col 代表列。
    • 通过 span Prop 定义列占据的栅格数（总共 24 栅格）。
    • 通过 offset, push, pull 控制偏移。
    • 通过 gutter Prop 设置列间距。
    • 响应式布局：可以通过 :xs, :sm, :md, :lg, :xl Props 为不同屏幕尺寸设置不同的 span 或 offset。
    • 示例：
      html
      <el-row :gutter="20">
      <el-col :span="12"><div>内容1</div></el-col>
      <el-col :span="12"><div>内容2</div></el-col>
      </el-row>

  2. Container 布局容器 (el-container, el-header, el-aside, el-main, el-footer):

    • 用于快速搭建典型的页面结构（上/下/左/右/中）。
    • el-container: 外层容器。当子元素中包含 el-header 或 el-footer 时，其方向为垂直 flex-direction: column；若包含 el-aside，则方向为水平 flex-direction: row。
    • el-header: 顶部容器，默认有一定高度。
    • el-aside: 侧边栏容器，默认有一定宽度。
    • el-main: 主要内容区域，会自动填充剩余空间。
    • el-footer: 底部容器，默认有一定高度。
    • 示例：
      html
      <el-container>
      <el-header>Header</el-header>
      <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
      </el-container>
      <el-footer>Footer</el-footer>
      </el-container>

  3. Button 按钮 (el-button):

    • 基础交互元素。
    • type: 控制按钮样式 (primary, success, warning, danger, info, text)。
    • size: 控制尺寸 (medium, small, mini)。
    • plain: 朴素按钮。
    • round: 圆角按钮。
    • circle: 圆形按钮（通常只放图标）。
    • disabled: 禁用状态。
    • loading: 加载状态。
    • icon: 设置按钮图标 (如 el-icon-search)。
    • @click: 监听点击事件。

  4. Input 输入框 (el-input):

    • 核心表单组件。
    • v-model: 双向绑定输入值。
    • type: 输入框类型 (text, password, textarea, number 等)。
    • placeholder: 占位文本。
    • clearable: 是否带清空按钮。
    • show-password: 是否带切换密码可见性按钮（type="password" 时）。
    • disabled: 禁用状态。
    • prefix-icon, suffix-icon: 前置/后置图标。
    • @input, @change, @blur, @focus: 常用事件。

  5. Form 表单 (el-form, el-form-item, 及各类表单控件):

    • 用于数据收集、校验和提交。
    • el-form: 表单容器。
      • model: 绑定表单数据对象。
      • rules: 定义表单校验规则。
      • label-width: 表单域标签的宽度。
      • inline: 是否行内表单。
      • ref: 用于后续调用表单方法（如 validate, resetFields）。
    • el-form-item: 表单项容器。
      • label: 标签文本。
      • prop: 对应 model 中的字段名，用于校验。
    • 表单控件：el-input, el-select, el-radio, el-checkbox, el-date-picker, el-time-picker, el-switch, el-cascader, el-upload 等。
    • 校验：通过 rules 定义规则（如 required, type, min, max, pattern, 自定义 validator），调用 this.$refs.formName.validate((valid) => { ... }) 进行校验。
    • 示例：
      html
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
      </el-form>
      javascript
      // in script
      data() {
      return {
      ruleForm: { name: '' },
      rules: {
      name: [ { required: true, message: '请输入活动名称', trigger: 'blur' } ]
      }
      };
      },
      methods: {
      submitForm(formName) {
      this.$refs[formName].validate((valid) => {
      if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; }
      });
      },
      resetForm(formName) {
      this.$refs[formName].resetFields();
      }
      }

  6. Table 表格 (el-table, el-table-column):

    • 展示结构化数据的核心组件。
    • el-table: 表格容器。
      • data: 表格数据数组。
      • stripe: 是否带斑马纹。
      • border: 是否带纵向边框。
      • height, max-height: 固定表头或限制高度。
      • @selection-change: 当选择项发生变化时会触发该事件。
    • el-table-column: 定义表格列。
      • prop: 对应 data 数组中对象的属性名。
      • label: 列头显示文本。
      • width: 列宽度。
      • fixed: 列固定（left 或 right）。
      • type: 特殊列类型 (selection 复选框, index 索引, expand 展开行)。
      • formatter: 格式化单元格显示内容 (函数)。
      • 作用域插槽 (Scoped Slot): 用于自定义列的渲染内容，非常强大。
        html
        <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>

  7. Pagination 分页 (el-pagination):

    • 配合表格等数据列表使用。
    • v-model:current-page (或 :current-page.sync): 当前页码。
    • v-model:page-size (或 :page-size.sync): 每页显示条目个数。
    • total: 总条目数。
    • layout: 组件布局，子组件名用逗号分隔 (如 total, sizes, prev, pager, next, jumper)。
    • page-sizes: 每页显示个数选择器的选项设置。
    • @size-change: pageSize 改变时触发。
    • @current-change: currentPage 改变时触发。

  8. Dialog 对话框 (el-dialog):

    • 模态窗口，用于展示信息、表单等。
    • title: 对话框标题。
    • visible.sync: 控制对话框显示与隐藏（重要，使用 .sync 修饰符）。
    • width: 对话框宽度。
    • before-close: 关闭前的回调，会暂停关闭。
    • center: 是否对头部和底部采用居中布局。
    • 默认插槽：对话框主体内容。
    • footer 插槽：自定义底部按钮区域。

  9. Message 消息提示 (this.$message):

    • 非模态提示，常用于操作反馈。
    • this.$message('这是一条消息提示');
    • this.$message.success('成功消息');
    • this.$message.warning('警告消息');
    • this.$message.error('错误消息');
    • 可以传入配置对象：this.$message({ message: '恭喜你', type: 'success', duration: 1000 });

  10. MessageBox 弹框 (this.$confirm, this.$alert, this.$prompt):

    • 模态确认框、提示框、输入框。
    • this.$alert('内容', '标题', { confirmButtonText: '确定', callback: action => { ... } });
    • this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { ... }).catch(() => { ... }); (返回 Promise)
    • this.$prompt('请输入邮箱', '提示', { ... }).then(({ value }) => { ... }).catch(() => { ... });

第四章：主题定制与国际化

  • 主题定制:

    • 在线主题编辑器: 访问 Element UI 官网提供的在线主题生成工具，可视化调整颜色、圆角等，下载主题包替换 theme-chalk 目录。
    • SCSS 变量覆盖: 如果项目使用 SCSS，可以更灵活地定制。
      1. 安装 sass 和 sass-loader。
      2. 创建一个 SCSS 变量文件（如 src/styles/element-variables.scss），在此文件中覆盖 Element UI 的变量（变量列表可在 node_modules/element-ui/packages/theme-chalk/src/common/var.scss 找到）。
        scss
        /* 改变主题色 */
        $--color-primary: teal;
        /* 改变 icon 字体路径变量，必需 */
        $--font-path: '~element-ui/lib/theme-chalk/fonts';
        @import "~element-ui/packages/theme-chalk/src/index"; // 引入 Element UI 源码
      3. 在 main.js 中引入你的 SCSS 文件，而不是 element-ui/lib/theme-chalk/index.css。
        javascript
        // import 'element-ui/lib/theme-chalk/index.css'; // 注释掉或删除这行
        import './styles/element-variables.scss'; // 引入你的 SCSS 文件

  • 国际化 (i18n):

    1. 安装 vue-i18n。

    2. 在 main.js 中配置 vue-i18n 并引入 Element UI 的语言包。
      “`javascript
      import Vue from ‘vue’;
      import ElementUI from ‘element-ui’;
      import locale from ‘element-ui/lib/locale/lang/en’; // 引入英文语言包
      // import locale from ‘element-ui/lib/locale/lang/zh-CN’; // 或中文语言包
      import VueI18n from ‘vue-i18n’;

      Vue.use(VueI18n);
      Vue.use(ElementUI, { locale }); // 将语言包配置给 Element UI

      const i18n = new VueI18n({
      locale: ‘en’, // 设置默认语言
      messages: {
      ‘en’: { …require(‘./lang/en.json’), …require(‘element-ui/lib/locale/lang/en’) },
      ‘zh-CN’: { …require(‘./lang/zh-CN.json’), …require(‘element-ui/lib/locale/lang/zh-CN’) }
      }
      });

      new Vue({
      i18n, // 挂载 i18n
      // … 其他配置
      }).$mount(‘#app’);
      ``
      3. 在组件中使用      $t(‘your.key’)来显示多语言文本。Element UI 组件内部的文本会自动根据配置的locale` 显示对应语言。

第五章：项目实战：构建一个简单的用户管理列表

现在，我们将运用所学知识，构建一个包含用户数据显示、搜索、添加、编辑和删除功能的简单用户管理页面。

1. 准备工作:

  • 确保你有一个已安装并配置好 Element UI (推荐按需引入) 的 Vue CLI 项目。
  • 安装 axios 用于模拟 API 请求（或者你可以直接使用静态数据）：
    bash
    npm install axios -S

2. 页面布局 (src/views/UserManagement.vue):

使用 el-container 和 el-card 构建基本页面结构。

“`html

“`

3. 代码说明:

  • 布局: 使用 el-container、el-card 构建基本框架。搜索和按钮区域放在 el-card 的 header 插槽中。
  • 搜索: 使用 el-form (inline 模式) 和 el-input 实现搜索框，通过 v-model 绑定搜索关键词，点击搜索按钮或回车触发 handleSearch 方法。
  • 表格: 使用 el-table 展示数据，el-table-column 定义列。
    • data 属性绑定 tableData 数组。
    • v-loading 绑定 loading 状态，在数据加载时显示加载动画。
    • prop 对应数据字段，label 是列头。
    • type="index" 显示序号。
    • sortable 开启列排序。
    • formatter 用于格式化单元格内容（如日期）。
    • 操作列使用作用域插槽 slot-scope="scope" 来自定义渲染内容（编辑、删除按钮），并通过 scope.row 获取当前行数据。
  • 分页: 使用 el-pagination，绑定 currentPage, pageSize, total，监听 @size-change 和 @current-change 事件来更新分页参数并重新获取数据。.sync 修饰符可以简化双向绑定。
  • 添加/编辑对话框: 使用 el-dialog。
    • visible.sync 控制显隐。
    • title 根据是添加还是编辑动态改变。
    • 内部使用 el-form 来收集用户信息，绑定 userForm 数据对象和 userRules 校验规则。
    • 添加时显示密码输入框，编辑时不显示（根据 dialogMode 判断）。
    • 提交时调用 this.$refs.userFormRef.validate 进行校验，校验通过后调用模拟 API ( mockApi.addUser 或 mockApi.updateUser)。
    • 关闭对话框或提交成功后，调用 resetUserForm 清空并重置表单状态。
  • 删除确认: 使用 this.$confirm 弹出确认框，用户确认后调用模拟 API (mockApi.deleteUser)。
  • 数据获取: fetchData 方法负责根据当前搜索条件和分页参数，调用模拟 API (mockApi.fetchUsers) 获取数据，并更新 tableData 和 pagination.total。loading 状态用于控制表格加载动画。
  • 模拟 API: mockApi 对象模拟了后端的增删改查接口，返回 Promise 并带有一定的延迟，使得交互更真实。在实际项目中，你会替换为 axios 等 HTTP 客户端发起的真实请求。
  • 表单校验: 定义了 userRules，包含必填、邮箱格式、密码长度等校验。使用了 Element UI 的内置规则和自定义 validator 函数。

4. 路由配置 (如果使用 Vue Router):

在 src/router/index.js 中添加路由：

“`javascript
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import UserManagement from ‘../views/UserManagement.vue’; // 引入组件

Vue.use(VueRouter);

const routes = [
{
path: ‘/users’,
name: ‘UserManagement’,
component: UserManagement
},
// … 其他路由
];

const router = new VueRouter({
mode: ‘history’, // 或 ‘hash’
base: process.env.BASE_URL,
routes
});

export default router;
“`

然后在 App.vue 中添加 <router-view/> 来显示路由匹配的组件。

5. 运行项目:

“`bash
npm run serve

或

yarn serve
``
访问浏览器中显示的地址（通常是http://localhost:8080），导航到/users` 路径，即可看到用户管理页面。

第六章：最佳实践与进阶技巧

  1. 按需引入是关键: 对于生产环境，务必配置按需引入，显著减小打包体积。
  2. 善用官方文档: Element UI 的文档非常完善，遇到问题或不确定的 Props/Events/Slots 时，第一时间查阅官方文档 (https://element.eleme.cn/) 是最高效的方法。
  3. 组件封装: 对于项目中频繁使用的、带有特定业务逻辑的 Element UI 组件组合（如带特定校验规则的输入框、带搜索功能的下拉框），可以将其封装成自定义业务组件，提高代码复用性。
  4. 性能优化:
    • 对于大型表格 (el-table)，考虑使用 max-height 固定表头，或者结合虚拟滚动技术（可能需要第三方库或自行实现）。
    • 避免在表格的 formatter 或作用域插槽中进行复杂的计算，可能影响性能。
    • 合理使用 v-if 和 v-show 控制组件渲染。
  5. 可访问性 (Accessibility): Element UI 在可访问性方面做了不少工作，但开发者仍需关注：为表单元素关联 label，为图标按钮提供 aria-label 或 title 等。
  6. 保持一致性: 在项目中使用统一的组件尺寸 (size)、交互模式和视觉风格，提升用户体验。
  7. 了解 Element Plus: 如果你正在开始一个新项目并使用 Vue 3，请直接学习和使用 Element Plus (https://element-plus.org/)。它继承了 Element UI 的优点，并针对 Vue 3 的 Composition API 进行了优化，API 和组件使用方式大部分相似，但也有一些变化。

结语

Element UI 以其丰富的组件、友好的 API 设计和高质量的实现，成为了 Vue 生态中构建桌面端应用的得力助手。通过本教程，我们从环境搭建、安装配置开始，深入了解了 Element UI 的核心概念和常用组件，并通过一个实战项目演练了其在实际开发中的应用流程。

掌握 Element UI 并非一蹴而就，关键在于不断实践和查阅文档。希望这篇详尽的教程能为你打下坚实的基础，助你在未来的 Vue 项目开发中更加得心应手，高效地构建出美观、专业的 Web 应用界面。祝你编码愉快！

发表评论

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

滚动至顶部