Element UI 初体验：从安装到使用全攻略
🎯 引言
学会这篇文章后，你将了解为什么前端开发中需要 UI 框架，Element UI 是什么，如何在 Vue2 项目中快速安装并使用它。这样你就能大幅提升开发效率，避免重复造轮子，轻松搭建美观且高效的界面。
⚙️ 为什么需要 Element UI？
🤔 原生组件开发有多痛苦？
在前端开发中，我们经常需要按钮、表单、弹窗、导航等各种 UI 组件。用原生 HTML 和 CSS 来做这些组件，虽然灵活，但痛点非常明显：
- 样式写起来很繁琐，兼容性问题多
- 交互效果（比如弹窗动画、表单校验）需要用大量 JavaScript 来实现
- 组件复用难度大，其他项目想用得重新写
- UI 设计不统一，维护成本高
举个例子，你要写一个带有验证功能的表单，光验证逻辑就要写好几百行代码，还要保证错误提示样式美观，用户体验才不会差。
🚀 使用 UI 框架带来哪些效率提升？
正因为原生组件开发的痛苦，很多团队选择使用 UI 框架。UI 框架帮你封装好了各种常见组件，优势很明显：
- 只需简单配置，快速搭建界面
- 样式统一，保持整体风格一致
- 内置丰富交互效果，减少重复造轮子
- 社区活跃，有大量示例和文档支持
- 按需引入减少打包体积，性能友好
使用 UI 框架能让你用更少的代码实现更复杂的功能，开发速度大幅提升，项目维护也更加轻松。
🎨 什么是 Element UI？
Element UI 是一套为基于 Vue2，面向设计师和开发者的组件库。它由饿了么前端团队开发，开源且文档完善，设计语言简洁优雅，组件丰富，满足绝大多数后台管理系统的需求。
它的特点：
- 基于 Vue2，使用起来顺畅，符合 Vue 的设计理念
- 组件丰富，包括按钮、表单、弹窗、菜单、表格等应有尽有
- 支持主题定制，能根据品牌风格修改样式
- 文档详细，示例丰富，上手快
- 社区活跃，问题和需求响应快
简而言之，Element UI 是 Vue2 生态中最受欢迎的 UI 组件库之一，特别适合后台管理界面。
🛠️ 如何在 Vue2 项目安装 Element UI
安装 Element UI 有两种常见方式：完整引入和按需引入。下面先聊聊安装的准备工作。
1. 安装依赖
确保你的项目是基于 Vue2 的，npm 或 yarn 可用，然后在项目根目录执行：
npm install element-ui --save
# 或者使用 yarn
yarn add element-ui
这样 Element UI 的代码和样式会被下载到你的项目 node_moduels 里面。
2. 在项目中导入并使用
Element UI 提供了完整引入和按需引入两种方式。
✨ 完整引入 Element UI
完整引入指的是把所有的 Element UI 组件和样式一次性导入，优点是配置简单，适合小项目或开发初期快速试用。
在 main.js 里写：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App),
});
这样，Element UI 的所有组件都可在项目中使用，无需单独导入。
🎉 使用示例：
<template>
<el-button type="primary">这是一个按钮</el-button>
</template>
🔍 按需引入 Element UI
按需引入可以只引入你用到的组件，减少打包体积，让项目更轻量。
1. 安装 babel-plugin-component 插件
npm install babel-plugin-component -D
# 或者
yarn add babel-plugin-component -D
2. 修改 babel.config.js 或 .babelrc 配置：
module.exports = {
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
],
};
3. 在代码中按需导入组件：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
new Vue({
el: '#app',
render: h => h(App),
});
这样，你只引入了按钮和选择器组件，其它组件不会被打包进来。
🎉 使用示例：
<template>
<div>
<el-button type="success">成功按钮</el-button>
<el-select v-model="value" placeholder="请选择">
<el-option label="选项1" value="1" />
<el-option label="选项2" value="2" />
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
};
},
};
</script>
🧾 小节总结
- 使用 Element UI 能极大提升前端开发效率，避免重复造轮子，尤其适合后台管理界面
- 完整引入简单上手，但会增加打包体积，适合快速开发或小项目
- 按需引入能减小体积，适合正式项目，需配置 babel 插件实现组件和样式按需加载
❓ 知识问答（Q&A）
Q：Element UI 支持 Vue3 吗？
A：Element UI 目前主要支持 Vue2，Vue3 需要使用 Element Plus。
Q：按需引入时为什么样式不生效？
A：很可能是没有配置 babel-plugin-component 插件，或者样式库路径写错。
🧪 小练习
练习 1
尝试完整引入后，渲染第一个按钮组件
<template>
<el-button type="primary">按钮组件</el-button>
</template>
练习 2
尝试按需引入下，渲染一个下拉框组件
<template>
<el-select v-model="gender" placeholder="请选择性别">
<el-option label="男" value="male" />
<el-option label="女" value="female" />
</el-select>
</template>
<script>
export default {
data() {
return {
gender: '',
};
},
};
</script>
🎉 恭喜你已经掌握 Element UI 的核心技能：理解为什么需要它，认识它是什么，以及如何在 Vue2 项目中安装并使用 Element UI（完整引入和按需引入）！