3号垃圾：Element Plus 快速入门

今天是c/v工程师.......

1. Element Plus 简介

Element Plus 是基于 Vue 3 的 UI 组件库，专为设计师和开发者打造，提供丰富的组件来快速构建现代化的 Web 界面。

官网：一个 Vue 3 UI 框架 | Element Plus

1.1 为什么选择 Element Plus？

• 基于 Vue 3，支持 Composition API，响应式更强。
• 丰富的 UI 组件，包含表单、表格、弹框等，开箱即用。
• 高扩展性，可以根据项目需求自定义主题。
• 社区活跃，官方维护，更新迭代快。
• 完善的文档，学习和使用成本低。

2. 快速入门

2.1 安装 Element Plus

在 Vue 3 工程中，可以使用 npm 或 yarn 安装 Element Plus：

npm install element-plus
# 或者使用 yarn
yarn add element-plus

官网里也有安装代码，可以直接复制

2.2 在 main.js 中引入

在 main.js (或 main.ts) 文件中引入 Element Plus 并全局注册：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

这样，所有 Element Plus 组件都可以在 Vue 组件中使用了。

这个代码官网里也有，太轻松了哈哈。

3. 常用组件

官网里面有非常多的组件并且样式也很好看，想要就直接复制代码就行了，简单。

而且里面的每个属性都有讲解，你可以根据需要去了解然后编写你想要的。

3.1 表格（Table）

表格是 Element Plus 中最常用的组件之一，主要用于展示结构化数据。

<el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="title" label="文章标题" width="180" />
    <el-table-column prop="category" label="分类" width="180" />
    <el-table-column prop="time" label="发表时间" />
    <el-table-column prop="state" label="状态" />
    <el-table-column label="操作">
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
    </el-table-column>
</el-table>

关键属性解析：

• :data="tableData"：绑定表格数据。
• prop="xxx"：对应 tableData 数据对象的键。
• label="xxx"：表格列名。
• :icon="Edit"：为按钮添加图标（需要引入）。

---

3.2 分页（Pagination）

分页组件用于数据分页显示：

<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
    :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="100"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

事件解析：

• @size-change：监听每页数据条数变化。
• @current-change：监听当前页变化。

---

3.3 表单（Form）

表单组件用于数据收集和用户交互。

<el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="文章分类">
        <el-input v-model="formInline.user" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
</el-form>

核心属性解析：

• :inline="true"：表示表单项水平排列。
• v-model="formInline.xxx"：双向绑定表单数据。
• clearable：支持输入框一键清除。

4. 组件嵌套应用

Element Plus 组件可以组合使用，比如在 el-card 内嵌套 el-table 和 el-pagination，实现卡片式表格展示。

<el-card style="width: 100%" shadow="always">
    <el-table :data="tableData" stripe>
        <el-table-column prop="title" label="文章标题" width="180" />
    </el-table>
    <el-pagination v-model:current-page="currentPage4" :total="100" />
</el-card>

5. 使用 Element Plus 的优点

✅ 提升开发效率：封装好的组件减少重复编码，提高生产力。 ✅ 响应式设计：适配不同屏幕尺寸，适合 PC 和移动端开发。 ✅ 丰富的图标支持：提供 @element-plus/icons-vue，让 UI 更加生动。 ✅ 良好的文档支持：官方文档清晰，学习成本低。

6. 使用难点与解决方案

❌ Vue 2 项目无法直接使用：Element Plus 只支持 Vue 3，如果是 Vue 2，推荐使用 Element UI。 ❌ 体积较大：默认情况下 Element Plus 引入所有组件，建议使用 按需加载 来减少打包体积。

如何按需引入？

npm install unplugin-vue-components unplugin-auto-import -D

然后在 vite.config.js 配置：

import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
});

这样只会加载实际使用的组件，减少打包体积。

7. 结语

Element Plus 是 Vue 3 生态中优秀的 UI 组件库，适用于中后台管理系统。掌握 Element Plus 可以帮助我们快速构建美观、交互友好的 Web 应用。

今天学了又好像没学.......