Element UI

当你用 Vue 2.0 开发 PC 端管理后台或企业级应用，需要一套开箱即用、不依赖业务逻辑的 UI 组件来拼装界面时，Element UI 提供了从按钮到布局容器的完整组件集。

它能做什么

Element UI 是一套基于 Vue 2.0 封装的桌面端组件库，核心价值在于提供丰富的 PC 端常用组件，让开发者直接复用而非重复封装按钮、弹窗、表格、表单等元素，从而降低开发难度并提高组件重用性。

• 按钮组件：支持基础使用、禁用状态、加载中状态以及按钮组四种形态
• 布局容器：提供 Container 布局容器，用于快速搭建页面基本框架
• 按需引入：借助 babel-plugin-component 插件，可只引入需要的组件，减小项目体积

怎么上手

安装方式支持 npm 和 yarn 两种：npm 命令为 npm i element-ui，yarn 命令为 yarn add element-ui。引入方式分为完整引入和按需引入，完整引入需在 main.js 中写入全部组件并单独引入样式文件；按需引入需先安装 babel-plugin-component（-D 参数），然后修改 .babelrc 配置文件，最后在 main.js 中只写入需要的组件。

• 按需引入：安装 babel-plugin-component 后，修改 .babelrc，再在 main.js 中声明所需组件
• 使用方式：从官网找到所需组件的代码片段，直接拷贝到项目对应位置，再根据功能需求修改

注意事项

Element UI 仅适用于 Vue 2.0 项目，不兼容 Vue 3.x（Vue 3 对应的是 Element Plus）。官网首页明确标注其版本为“基于 Vue 2.0”，第三方教程也全部基于 Vue 2 生态。

• 版本锁定：仅支持 Vue 2.0，Vue 3 项目需使用 Element Plus
• 样式分离：完整引入时，样式文件必须单独引入，不能省略

常见问题

Q1：Element UI 和 Element Plus 是什么关系？

A1：Element UI 基于 Vue 2.0，而 Element Plus 是其 Vue 3.x 的升级版本，两者不兼容，项目选型时需根据 Vue 版本来选择对应组件库。

Q2：Element UI 能否只引入几个按钮来减小项目体积？

A2：可以。通过安装 babel-plugin-component 并修改 .babelrc 配置，就能在 main.js 中只写入需要的组件（如 Button、Container），实现按需加载，避免打包整个库。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。