---

Element UI 快速入门指南：构建优雅的 Vue.js 应用

欢迎来到 Element UI 的世界！如果您是一位 Vue.js 开发者，并且渴望构建美观、响应式且功能丰富的用户界面，那么 Element UI 无疑是您的绝佳选择。Element UI 是饿了么前端团队推出的一套基于 Vue 2.0 的桌面端组件库，提供了丰富多样的 UI 组件，帮助开发者大幅提高开发效率，快速搭建企业级中后台产品。

本指南将带您从零开始，一步步了解 Element UI 的安装、配置和基本使用，助您快速掌握其核心概念，并能在您的 Vue.js 项目中熟练运用。无论您是刚接触 Element UI，还是希望系统地学习其入门知识，本文都将为您提供详细的指引。

1. 初识 Element UI：它是什么？为什么选择它？

1.1 什么是 Element UI？

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它提供了诸如按钮、输入框、表格、弹窗、导航、数据选择器等一系列开箱即用的 UI 组件。这些组件经过精心设计和实现，具有高度的可用性、一致性和美观性。

1.2 为什么选择 Element UI？

• 丰富的组件库： Element UI 提供了几乎涵盖所有常见需求的组件，从基础的表单元素到复杂的数据展示和交互组件，应有尽有。这极大地减少了开发者从头构建 UI 组件的工作量。
• 一致的 UI 风格： Element UI 的所有组件都遵循一套统一的设计规范，使得构建出的应用拥有和谐统一的视觉风格，提升用户体验。
• 基于 Vue.js 生态： 作为 Vue.js 的组件库，Element UI 与 Vue.js 框架深度集成，充分利用了 Vue 的响应式数据绑定、组件化等特性，开发体验流畅自然。
• 良好的文档和社区支持： Element UI 拥有详尽的官方文档（虽然是中文文档，但质量很高），并且社区活跃，遇到问题时很容易找到解决方案。
• 易于定制和主题切换： Element UI 支持基于 SCSS 的变量覆盖和在线主题生成工具，方便开发者根据项目需求进行样式定制和主题切换。
• 国际化支持： 内置多语言支持，方便构建国际化的应用。
• 持续维护和更新： 饿了么团队和社区持续对 Element UI 进行维护和更新，确保其稳定性和前沿性。

如果您正在使用 Vue 3，饿了么团队也推出了 Element Plus，它是 Element UI 的 Vue 3 版本，API 设计更加现代化，性能更优。不过，本指南专注于 Element UI (Vue 2)，但其中大部分概念和使用方法也适用于 Element Plus。

2. 前期准备：工欲善其事，必先利其器

在开始使用 Element UI 之前，请确保您的开发环境满足以下要求：

• Vue.js 基础知识： 您需要了解 Vue 实例、组件、模板语法、数据绑定、事件处理、组件通信等基础概念。Element UI 是构建在 Vue.js 之上的，没有 Vue.js 基础将难以理解其用法。
• Node.js 环境： Element UI 和其依赖项通常通过 npm 或 yarn 进行安装和管理。请确保您的计算机上已安装 Node.js，并且版本较新（建议 12.x 或更高）。您可以通过在终端运行 node -v 和 npm -v 或 yarn -v 来检查版本。
• 包管理器： 您需要使用 npm 或 yarn 作为您的包管理器。它们是 Node.js 自带的或常用的工具，用于安装、升级和管理项目依赖。
• 现代浏览器： Element UI 主要面向现代桌面浏览器，如 Chrome、Firefox、Edge、Safari 等。

如果您还没有 Vue.js 项目，建议您使用 Vue CLI 或 Vite 快速创建一个。Vue CLI 是 Vue 官方提供的脚手架工具，用于快速生成 Vue 项目骨架；Vite 则是新一代前端构建工具，以其极快的开发服务器启动速度而闻名。对于新手来说，Vue CLI 可能配置更齐全，而 Vite 更轻快。

使用 Vue CLI 创建项目（如果您还没有）：

“`bash

确保您已经安装了 Vue CLI

npm install -g @vue/cli

或使用 yarn

yarn global add @vue/cli

创建一个新项目

vue create my-elementui-app

根据提示选择预设配置（例如，Manually select features，然后选择 Babel, Router, Vuex 等）

进入项目目录

cd my-elementui-app

运行项目

npm run serve

或

yarn serve
“`

使用 Vite 创建项目（如果您还没有）：

“`bash

创建一个 Vue 项目 (选择 vue 或 vue-ts)

npm init vue@latest

切换到项目目录

cd

安装依赖

npm install

或

yarn

运行项目

npm run dev

或

yarn dev
“`

确保您的 Vue 项目能够正常运行，这是使用 Element UI 的基础。

3. 安装 Element UI：将组件库引入项目

将 Element UI 集成到您的 Vue 项目中有两种主要方式：完整引入 和 按需引入。

• 完整引入 (Full Import)： 将 Element UI 的所有组件和样式一次性全部引入项目中。这种方式简单直接，适合新手入门和项目初期阶段，但会增加项目的打包体积。
• 按需引入 (On-Demand Import)： 只引入您在项目中实际使用的组件，从而减小打包体积。这种方式更适合生产环境，但配置稍微复杂一些。

对于快速入门，我们推荐先使用完整引入，因为它最简单。

3.1 完整引入 (推荐新手)

1. 安装 Element UI： 在您的 Vue 项目根目录打开终端，运行以下命令：

   “`bash
   npm install element-ui –save

   或使用 yarn

   yarn add element-ui
   ``–save(或–save-prod) 标志会将 Element UI 添加到项目的dependencies` 中，表示它在生产环境也是必需的依赖。

2. 在项目主入口文件引入并注册： 打开您的项目主入口文件，通常是 src/main.js 或 src/main.ts (如果是 TypeScript 项目)。

   “`javascript
   // src/main.js

   import Vue from ‘vue’;
   import App from ‘./App.vue’;
   import router from ‘./router’; // 如果您使用了 Vue Router
   import store from ‘./store’; // 如果您使用了 Vuex

   // 1. 引入 Element UI 库
   import ElementUI from ‘element-ui’;
   // 2. 引入 Element UI 的全部样式文件
   import ‘element-ui/lib/theme-chalk/index.css’;

   // 可选：引入 Element UI 的国际化语言包（默认是中文）
   // import locale from ‘element-ui/lib/locale/lang/en’; // 示例：英文

   Vue.config.productionTip = false;

   // 3. 将 Element UI 注册为 Vue 的插件
   // Vue.use(ElementUI, { locale }); // 如果需要设置语言
   Vue.use(ElementUI);

   new Vue({
   router, // 如果您使用了 Vue Router
   store, // 如果您使用了 Vuex
   render: h => h(App),
   }).$mount(‘#app’);

   “`

   代码解释：
   * import ElementUI from 'element-ui';：导入 Element UI 库本身，它是一个 Vue 插件。
   * import 'element-ui/lib/theme-chalk/index.css';：导入 Element UI 的默认主题样式文件。这是所有组件样式的基础，必不可少。
   * Vue.use(ElementUI);：调用 Vue.use() 方法将 Element UI 注册为 Vue 的插件。一旦注册，Element UI 的所有组件（以 el- 开头）就可以在您的 Vue 模板中直接使用了，并且一些全局方法（如 $message, $msgbox, $loading）也会被添加到 Vue 实例的原型上，可以在组件中通过 this.$message 等方式调用。

   至此，您已成功地将 Element UI 完整引入到您的项目中。

3.2 按需引入 (适合生产环境)

按需引入的目的是减少打包体积。Element UI 提供了一个 Babel 插件 babel-plugin-component 来实现这一目标。对于基于 Vite 的 Vue 3 项目，通常使用 unplugin-vue-components 和 unplugin-auto-import。这里我们主要介绍 Vue 2 项目中使用 babel-plugin-component 的方式。

1. 安装依赖： 除了安装 element-ui，还需要安装 babel-plugin-component。

   “`bash
   npm install babel-plugin-component -D

   或使用 yarn

   yarn add babel-plugin-component -D
   ``-D或–save-dev标志会将插件安装到devDependencies` 中，表示它只在开发环境需要，生产环境不需要。

2. 配置 .babelrc 或 babel.config.js： 根据您的 Vue CLI 版本，可能需要修改 .babelrc 文件或 babel.config.js 文件。

   如果使用 .babelrc 文件 (较旧的 Vue CLI 版本)：
   在项目根目录找到或创建 .babelrc 文件，添加以下配置：

   json
{
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
@vue/app 是 Vue CLI 3+ 的默认 Babel 预设。

   如果使用 babel.config.js 文件 (较新的 Vue CLI 版本)：
   在项目根目录找到 babel.config.js 文件，修改 plugins 配置：

   javascript
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
@vue/cli-plugin-babel/preset 是 Vue CLI 4+ 的默认 Babel 预设。

   这个插件的作用是，当 Babel 编译代码时，如果遇到如下形式的导入语句：

   javascript
import { Button, Select, Table } from 'element-ui';

   它会自动将其转换为按需导入组件和样式的形式，例如：

   javascript
import Button from 'element-ui/lib/button';
import Select from 'element-ui/lib/select';
import Table from 'element-ui/lib/table';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';
import 'element-ui/lib/theme-chalk/table.css';
   这样就只引入了您实际使用的组件及其对应的样式。

3. 在项目主入口文件按需引入组件： 修改 src/main.js 文件，不再完整引入 Element UI，而是按需引入和注册您需要的组件。

   “`javascript
   // src/main.js

   import Vue from ‘vue’;
   import App from ‘./App.vue’;
   // … 其他引入

   // 按需引入 Element UI 组件
   import {
   Button,
   Select,
   // … 更多你需要的组件
   } from ‘element-ui’;

   // 注意：按需引入时，样式不再需要手动引入全部 index.css
   // babel-plugin-component 会自动帮你引入每个组件对应的样式

   Vue.config.productionTip = false;

   // 注册按需引入的组件
   // Vue.use(Button); // 注册单个组件的方式
   // Vue.use(Select);
   // 或者更简便的方式：
   const components = [
   Button,
   Select,
   // … 所有按需引入的组件
   ];

   components.forEach(component => {
   Vue.component(component.name, component);
   });

   // 注册全局方法，例如 $message, $msgbox 等
   // 需要单独引入对应的服务
   import { Message, MessageBox } 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;
   // … 更多全局服务

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

   代码解释：
   * import { Button, Select, ... } from 'element-ui';：从 Element UI 中解构赋值导入您需要的组件。
   * Vue.component(component.name, component);：遍历导入的组件数组，使用 Vue.component() 方法将其注册为全局组件。Element UI 组件的 name 属性通常就是它们的标签名（如 ‘ElButton’, ‘ElSelect’）。
   * 全局服务（如 $message）不是通过 Vue.use() 注册的，而是通过将其挂载到 Vue.prototype 上实现的。因此需要单独引入并赋值。

   按需引入配置完成后，您就可以在组件模板中直接使用 <el-button>、<el-select> 等标签了。

总结安装步骤：

1. 安装 element-ui。
2. 完整引入 (新手推荐): 在 main.js 中导入 Element UI 和全部样式，然后 Vue.use(ElementUI).
3. 按需引入 (生产推荐): 安装 babel-plugin-component，在 .babelrc 或 babel.config.js 中配置插件，然后在 main.js 中按需导入和注册组件及全局服务。

选择一种方式进行安装即可。对于初学者，强烈建议先使用完整引入，等熟悉 Element UI 后再考虑切换到按需引入进行优化。

4. 开始使用 Element UI 组件

安装并配置完成后，您就可以在您的 Vue 组件中使用 Element UI 提供的组件了。Element UI 的组件标签名都以 el- 作为前缀，例如：<el-button> 用于按钮，<el-input> 用于输入框，<el-table> 用于表格等。

让我们以一个简单的例子来展示如何使用 Element UI 组件：在一个 Vue 组件中添加一个按钮和一段文本，并通过点击按钮改变文本。

假设您在 src/components 目录下有一个 HelloWorld.vue 文件。

“`vue

“`

代码解释：

• 模板 (<template>)：
  • 我们使用了 <el-button> 标签，这就是 Element UI 提供的按钮组件。
  • type="primary"：这是 Element UI 按钮的一个 Prop (属性)，用于设置按钮的类型或外观。primary 表示主要按钮，通常有背景色。Element UI 提供了 primary, success, warning, danger, info, text 等多种类型。
  • @click="changeGreeting"：这是一个 Vue 的事件绑定语法。当按钮被点击时，会触发组件 methods 中定义的 changeGreeting 方法。这也是 Element UI 组件暴露的 Event (事件)。
  • icon="el-icon-star-off"：使用 icon Prop 给按钮添加 Element UI 内置的图标。图标名称以 el-icon- 开头。
  • circle：一个布尔类型的 Prop，如果存在则使按钮变成圆形。
• 脚本 (<script>)：
  • data() 函数返回组件的响应式数据，greeting 初始值为 ‘你好，Element UI!’。
  • methods 对象中定义了 changeGreeting 方法。
  • this.greeting = 'Element UI 真好用！';：修改 greeting 数据，由于 Vue 的响应式特性，页面上绑定的文本会自动更新。
  • this.$message({...});：调用 Element UI 注册到 Vue 实例原型上的全局 $message 方法，用于显示一个短暂的提示消息（Toast）。message 是提示的内容，type 是提示的类型（如 success, warning, info, error）。注意，这个 $message 方法在完整引入或按需引入时都需要确保正确挂载到 Vue.prototype 上。
• 样式 (<style scoped>)：
  • scoped 属性确保样式只应用于当前组件。
  • .el-button 规则演示了如何通过 CSS 选择器选中 Element UI 组件并应用自定义样式。Element UI 的组件都有相应的 CSS 类名，通常是 el-组件名称 (如 el-button, el-input, el-table)。

将 HelloWorld 组件在您的 App.vue 或其他页面组件中使用，运行项目 (npm run serve 或 yarn serve)，您应该能看到带有 Element UI 风格的按钮，并且点击主要按钮后，文本和提示消息都会出现。

5. 探索更多常用组件

Element UI 提供了大量实用的组件。熟悉并掌握一些常用的组件是快速提升开发效率的关键。以下是一些您应该优先了解的常用组件：

5.1 布局容器 (Container)

提供常用的布局结构，如 Header, Aside, Main, Footer。

vue
<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>
这些组件通常用于构建页面的整体布局框架。

5.2 图标 (Icon)

Element UI 内置了一套常用的图标。使用 <i> 标签结合相应的 CSS 类名即可。

vue
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
类名通常是 el-icon-图标名称。您可以在 Element UI 官方文档中查看所有可用图标。

5.3 链接 (Link)

用于创建不同样式的超链接。

vue
<el-link href="https://element.eleme.cn" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success" disabled>禁用链接</el-link>
<el-link :underline="false">无下划线</el-link>
通过 type Prop 设置链接类型，href Prop 设置跳转地址，disabled Prop 禁用链接，underline Prop 控制下划线。

5.4 输入框 (Input)

用于文本输入。

“`vue

``
*v-model用于双向绑定输入框的值。
*placeholder设置占位文本。
*type=”textarea”创建多行文本框。
*rows设置多行文本框的行数。
*prefix-icon/suffix-icon` 在输入框前后添加图标。

5.5 单选框 (Radio) / 复选框 (Checkbox)

用于单选或多选。

“`vue

备选项1
备选项2

选中状态

``
* 单选框/复选框使用v-model绑定其选中状态（布尔值）或选中的值。
*labelProp 用于设置单选框/复选框的值（当它们在组中使用时）。
* 单选框组和复选框组使用v-model` 绑定一个字符串（单选组）或数组（复选组），方便统一管理组内选项的值。

5.6 选择器 (Select)

用于下拉选择。

“`vue

``
*使用v-model绑定选中的值。
* 通过遍历一个数组来生成列表。
*的:keyProp 建议绑定一个唯一值以提高性能。
*的:label是选项显示给用户看的内容，:value是选项实际代表的值（会被v-model绑定到selectValue）。
*placeholder` 设置选择器的占位文本。

5.7 开关 (Switch)

用于表示两种相互对立的状态切换。

vue
<el-switch v-model="switchValue" active-text="开启" inactive-text="关闭"></el-switch>
* v-model 绑定一个布尔值，表示开关的状态。
* active-text / inactive-text 设置开关开启/关闭状态时的文本。

5.8 滑块 (Slider)

用于在一定范围内选择数值。

vue
<el-slider v-model="sliderValue" :min="0" :max="100"></el-slider>
* v-model 绑定当前选中的数值。
* min / max 设置滑块的取值范围。

5.9 时间/日期选择器 (TimePicker / DatePicker)

用于选择时间和日期。

“`vue

``
*v-model绑定选中的日期或时间值，通常是一个 Date 对象或表示日期/时间的字符串。
*typeProp 可以设置日期选择器的类型，如year,month,date,week,datetime,daterange,monthrange` 等。

5.10 表格 (Table)

用于展示结构化数据，功能强大，支持排序、过滤、多选等。

“`vue

``
*的:dataProp 绑定要显示的数据数组，数组中的每个对象代表表格的一行。
*定义表格的列。
*的propProp 绑定数据对象中对应列的字段名。
*的labelProp 设置列的表头文本。
*width` Prop 设置列的宽度。

表格组件功能非常丰富，包括自定义列内容、排序、过滤、树形数据等，建议查阅官方文档深入学习。

5.11 对话框 (Dialog)

用于弹出模态窗口。

“`vue

打开对话框

这是一段信息

取 消
确 定

``
*的:visible.syncProp (在 Vue 3 中是v-model) 绑定一个布尔值，控制对话框的显示/隐藏。.sync修饰符会自动监听子组件触发的update:visible事件并更新父组件的dialogVisible值。
*titleProp 设置对话框标题。
*widthProp 设置对话框宽度。
*before-close是一个回调函数，在对话框关闭前触发，可以用来进行一些确认操作，例如上面例子中通过$confirm弹出一个确认提示。
*slot=”footer”定义对话框底部的操作按钮区域。
* 示例中的handleClose方法调用了 Element UI 的另一个全局服务$confirm`，用于显示一个确认消息框。

5.12 消息提示 (Message)

之前已经在按钮示例中用过，用于显示短暂的全局提示。

javascript
// 在 methods 中调用
this.$message('这是一条普通的消息');
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
this.$message.error('错了哦，这是一条错误消息');
* 通过 this.$message() 方法调用。
* 可以传入一个字符串作为内容，也可以传入一个配置对象。
* 配置对象中的 type Prop 可以设置不同的样式和图标 (success, warning, info, error)。
* Element UI 还提供了 $message.success(), $message.warning(), $message.info(), $message.error() 等快捷方法。

5.13 消息弹框 (MessageBox)

用于显示模态的消息提示、确认框或输入框。

“`javascript
// 在 methods 中调用

// 提示框
this.$alert(‘这是一段内容’, ‘标题名称’, {
confirmButtonText: ‘确定’,
callback: action => {
this.$message({
type: ‘info’,
message: action: ${ action }
});
}
});

// 确认框
this.$confirm(‘此操作将永久删除该文件, 是否继续?’, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
}).then(() => {
this.$message({
type: ‘success’,
message: ‘删除成功!’
});
}).catch(() => {
this.$message({
type: ‘info’,
message: ‘已取消删除’
});
});

// 输入框
this.$prompt(‘请输入邮箱’, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
inputPattern: /[\w!#$%&’+/=?^_{|}~-]+(?:\.[\w!#$%&'*+/=?^_{|}~-]+)@(?:\w?.)+\w?/,
inputErrorMessage: ‘邮箱格式不正确’
}).then(({ value }) => {
this.$message({
type: ‘success’,
message: ‘你的邮箱是: ‘ + value
});
}).catch(() => {
this.$message({
type: ‘info’,
message: ‘取消输入’
});
});
``
* Element UI 将MessageBox组件的服务挂载到Vue.prototype上，可以通过$msgbox,$alert,$confirm,$prompt调用。
*$alert显示一个带确定按钮的提示框。
*$confirm显示一个带确定和取消按钮的确认框，返回一个 Promise，可以使用.then().catch()处理用户点击确定或取消后的逻辑。
*$prompt` 显示一个带输入框、确定和取消按钮的弹框，也返回一个 Promise。

这些只是 Element UI 众多组件中的一小部分。Element UI 官方文档是了解所有组件、它们的 Props、Events、Slots 以及方法的最权威资源。建议您在入门后，根据项目需求，查阅文档深入学习各个组件的详细用法和高级功能。

6. 定制主题：打造属于您的风格

Element UI 提供了灵活的主题定制能力。最常用的方式是通过修改 SCSS 变量来覆盖默认样式。

1. 安装 SCSS 相关的 loader： 如果您的项目中还没有安装处理 SCSS 的 loader，需要安装它们。

   “`bash
   npm install sass-loader sass -D

   或使用 yarn

   yarn add sass-loader sass -D
   “`

2. 创建变量文件： 在您的项目中创建一个 SCSS 文件，例如 src/styles/element-variables.scss。

3. 复制 Element UI 的变量文件内容： 从 Element UI 官方 GitHub 仓库或其他渠道获取 Element UI 的默认 SCSS 变量文件（packages/theme-chalk/src/common/var.scss）的内容，复制到您刚刚创建的 element-variables.scss 文件中。

4. 修改变量值： 在您的 element-variables.scss 文件中，修改您想要定制的 SCSS 变量的值。例如，改变主题色：

   “`scss
   / src/styles/element-variables.scss /

   / 覆盖 Element UI 的默认主色 /
   $–color-primary: #409eff; / Element UI 默认蓝色 /
   $–color-primary: #ff4949; / 改为红色 /

   / 还可以修改其他变量，例如按钮颜色、字体颜色、边框颜色等 /
   $–button-primary-fill: $–color-primary; // 主按钮背景色跟随主色变化
   $–button-primary-border-color: $–color-primary; // 主按钮边框色跟随主色变化

   // 引入 Element UI 默认的变量文件，这样您只需要覆盖您想改动的变量
   // 确保这个引入在你自己的变量定义之后，或者你只需要复制整个文件并修改
   // @import “~element-ui/packages/theme-chalk/src/common/var.scss”; / 这不是覆盖的方式 /

   /
   正确的覆盖方式是：
   复制 Element UI 的 var.scss 内容到这个文件，然后修改里面的值。
   或者，只定义您想覆盖的变量，然后让 Element UI 的构建过程使用您的文件。
   Element UI 官方推荐的方式是创建一个新的主题，这涉及到更多配置，
   对于简单覆盖，直接修改变量文件再引入样式是可行的方式。
   更推荐的方式是使用 Vue CLI 的 css.loaderOptions.sass.additionalData 或 prependData
   或者 Vite 的 css.preprocessorOptions.scss.additionalData 来自动引入变量文件。
   这里为了简单入门，我们直接在 main.js 中引入修改后的样式。
   /

   // 如果选择在 main.js 中引入，这个文件本身就是最终的样式文件
   // 因此需要包含所有 Element UI 的样式，并在变量定义后导入其他部分的样式
   // 这种方式需要复制 Element UI 的全部样式文件并进行修改，比较繁琐。
   // 更简单的覆盖方式是利用构建工具的特性。
   “`

   更简单的变量覆盖方法 (推荐使用构建工具特性):

   不直接修改 element-variables.scss 使其成为最终样式文件，而是只在这个文件中定义要覆盖的变量。然后通过构建工具（如 Vue CLI 或 Vite）的配置，在编译 Element UI 的样式文件之前自动注入您的变量文件。这样 Element UI 的样式就会使用您的变量值进行编译。

   以 Vue CLI 4+ 为例，在 vue.config.js 中配置：

   javascript
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
// 注意：在 Vue CLI 4+ 中，sass-loader 的 additionalData 选项取代了 prependData
// 对于 Dart Sass，使用 additionalData；对于 Node Sass，使用 prependData
// Element UI 默认推荐使用 Dart Sass
additionalData: `@import "~@/styles/element-variables.scss";`
}
}
}
}
   这里的 @/styles/element-variables.scss 是您变量文件的路径。~ 前缀告诉 webpack 这是一个模块路径。

   以 Vite 2+ 为例，在 vite.config.js 中配置：

   “`javascript
   // vite.config.js
   import { defineConfig } from ‘vite’;
   import vue from ‘@vitejs/plugin-vue’;

   export default defineConfig({
   plugins: [vue()],
   css: {
   preprocessorOptions: {
   scss: {
   // 这里使用 additionalData
   additionalData: @use "@/styles/element-variables.scss" as *;
   // 如果使用的是旧的 @import 语法，可能是：
   // additionalData: @import "@/styles/element-variables.scss";
   }
   }
   }
   });
   ``
这里的@/styles/element-variables.scss` 是您变量文件的路径。

5. 在 main.js 中引入 Element UI 样式：

   • 如果您使用了构建工具的变量注入功能，并且是完整引入 Element UI，那么您仍然只需要在 main.js 中引入 Element UI 的默认样式文件 element-ui/lib/theme-chalk/index.css。构建工具会确保在编译 .css 文件时使用了您的变量。
   • 如果您没有使用构建工具的变量注入功能，并且选择了直接修改 element-variables.scss 文件使其包含所有样式（如复制 Element UI 全部样式），那么您需要修改 main.js，引入您修改后的 SCSS 文件（需要先被 SCSS loader 编译成 CSS）。

   “`javascript
   // src/main.js (使用构建工具注入变量方式)
   import Vue from ‘vue’;
   import App from ‘./App.vue’;
   // … 其他引入

   import ElementUI from ‘element-ui’;
   // 引入 Element UI 的默认样式文件
   // 构建工具会在这里引入样式时应用您在 element-variables.scss 中定义的变量
   import ‘element-ui/lib/theme-chalk/index.css’;

   // … Vue.use(ElementUI) 和其他配置
   “`

选择使用构建工具的 additionalData (或 prependData) 方式来注入变量是最推荐的，它能让您的变量文件保持简洁，并且可以方便地在任何 SCSS 文件中使用这些变量。

7. 国际化 (Internationalization – i18n)

Element UI 内置了多语言支持。如果您的应用需要支持多种语言，可以按需加载 Element UI 的语言包。

1. 安装 vue-i18n (如果您的项目需要国际化)： Element UI 通常与 vue-i18n 配合使用。

   “`bash
   npm install vue-i18n –save

   或使用 yarn

   yarn add vue-i18n
   “`

2. 安装 Element UI 的特定语言包： Element UI 的语言包是内置的，不需要额外安装。

3. 配置 vue-i18n 和 Element UI： 在您的 main.js 或专门的 i18n 配置文件中进行设置。

   “`javascript
   // src/i18n.js 或在 main.js 中配置

   import Vue from ‘vue’;
   import VueI18n from ‘vue-i18n’;
   import ElementLocale from ‘element-ui/lib/locale’;

   // 引入 Element UI 语言包
   import enLocale from ‘element-ui/lib/locale/lang/en’;
   import zhLocale from ‘element-ui/lib/locale/lang/zh-CN’;

   // 引入您自己应用的语言文件
   import en from ‘./locales/en.json’;
   import zh from ‘./locales/zh-CN.json’;

   Vue.use(VueI18n);

   const messages = {
   en: {
   …enLocale, // 将 Element UI 的英文语言包合并到您的英文语言文件中
   …en
   },
   ‘zh-CN’: {
   …zhLocale, // 将 Element UI 的中文语言包合并到您的中文语言文件中
   …zh
   }
   // … 更多语言
   };

   const i18n = new VueI18n({
   locale: ‘zh-CN’, // 设置默认语言
   messages
   });

   // 将 i18n 实例提供给 Element UI
   ElementLocale.i18n((key, value) => i18n.t(key, value));

   export default i18n; // 如果您在单独的文件中配置

   // — 在 main.js 中 —
   import Vue from ‘vue’;
   import App from ‘./App.vue’;
   // … 其他引入
   import ElementUI from ‘element-ui’;
   import ‘element-ui/lib/theme-chalk/index.css’;
   // 引入上面创建的 i18n 实例
   import i18n from ‘./i18n’;

   Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) });
   // 或者如果您没有使用 vue-i18n，可以直接传入语言包对象
   // import lang from ‘element-ui/lib/locale/lang/en’;
   // Vue.use(ElementUI, { locale: lang });

   new Vue({
   i18n, // 将 i18n 实例注入到 Vue 根实例中
   // … 其他配置
   render: h => h(App),
   }).$mount(‘#app’);
   ``
**代码解释：**
* 安装vue-i18n。
* 引入 Element UI 提供的语言包文件（如enLocale,zhLocale）。
* 将 Element UI 的语言包内容合并到您自己的应用语言包中。
* 创建VueI18n实例，设置默认语言和消息对象。
* 通过ElementLocale.i18n((key, value) => i18n.t(key, value))或在Vue.use(ElementUI, { i18n: … })中配置，告诉 Element UI 如何获取国际化文本。Element UI 内部会调用这个函数来获取当前语言下的文本。
* 将i18n实例添加到 Vue 根实例的选项中，这样您可以在任何组件中通过this.$t` 来获取国际化文本。

配置完成后，切换应用的语言 (i18n.locale = 'en') 时，Element UI 组件中的文本（如日期选择器的月份名称、分页组件的文本等）也会随之改变。

8. 进阶与最佳实践

• 阅读官方文档： Element UI 的官方文档非常详细和全面，是您学习和使用过程中最重要的资源。遇到任何问题或需要了解某个组件的详细用法时，请务必查阅文档。
• 按需引入： 在项目趋于稳定或准备部署生产环境时，强烈建议将完整引入切换为按需引入，以减小打包体积，优化应用加载速度。
• 理解 Props, Events, Slots： Element UI 的组件遵循 Vue 的组件规范，通过 Props 接收外部数据，通过 Events 向上抛出事件，通过 Slots 允许内容分发。熟练运用这三个概念是使用好 Element UI 的基础。
• 善用全局服务： $message, $msgbox, $loading 等全局服务非常方便，可以在任何组件中直接调用。
• 响应式设计： Element UI 提供了一些辅助类和栅格系统 (el-row, el-col) 来帮助您构建响应式布局。
• 表单校验： Element UI 的 el-form 和 el-form-item 组件提供了强大的表单校验功能，配合 rules Prop 可以轻松实现复杂的表单验证逻辑。
• 性能优化： 对于大量数据的展示（如表格、树形控件），注意 Element UI 可能提供的虚拟滚动、懒加载等性能优化特性。
• 保持更新： 关注 Element UI 的版本更新，及时升级到最新版本，可以获取新功能、性能优化和 bug 修复。
• 代码规范： 遵循 Vue 和 Element UI 的官方代码风格指南，保持代码的整洁和可维护性。

9. 总结与展望

恭喜您！通过本指南的学习，您应该已经对 Element UI 有了初步的了解，掌握了其安装、引入和基本组件的使用方法。Element UI 作为一套成熟稳定的 Vue UI 组件库，能够极大地提升您的开发效率，帮助您构建出专业美观的后台管理界面。

快速入门只是第一步，Element UI 的强大之处在于其丰富多样的组件和灵活的定制能力。鼓励您在实践中不断探索，尝试使用更多的组件，深入学习其高级特性（如表格的复杂用法、表单校验、自定义主题等）。

记住，官方文档永远是您最好的老师。祝您在 Element UI 的世界里开发愉快，创造出更多令人惊艳的应用！

---

（注：本文基于 Element UI Vue 2.x 版本编写。如果您使用 Vue 3，请考虑使用 Element Plus，其安装和部分用法有所不同，但核心概念是相似的。）