Vue Element Plus框架用法详解（附带实例）

Element Plus 是由饿了么大前端团队开源出品的一套供开发者、设计师和产品经理使用的基于 Vue3 的组件库。

Element Plus 框架提供了一系列强大且完善的 UI 组件和设计资源，可以帮助开发者快速地开发出用户体验感很强的网站。

Element Plus 框架既可以实现 PC 端前台展示型网站项目，还可以实现 PC 端中后台管理系统项目，且后者的应用频率较高。本节主要介绍 Element Plus 框架的用法。

Element Plus框架的完整引入操作

Element Plus 框架主要应用于中后台管理系统项目，与前台 UI 框架相比，其表单验证操作更全面。当然，适用于中后台管理系统项目的 UI 框架不只有 Element Plus，还有 Ant Design Vue。这两款 UI 框架的功能相差不大，但因为 Element Plus 框架提供了虚拟化表格、虚拟化选择器、无限滚动等辅助组件的功能，所以使用 Element Plus 框架的群体更庞大。

下面将介绍如何在项目中完整引入 Element Plus 框架。完整引入主要分为 3 步：
1) 创建一个 Vue 项目，将其命名为“vue3-book-element-plus”，命令如下：

npm create vite@latest vue3-book-element-plus -- --template vue

2) Element Plus 官方文档中包含了该框架的安装和配置说明，读者只需按照文档引导一步步操作即可。这里其实分为了两步，简单赘述一下。
① 框架的准备工作，在项目中安装 UI 框架，命令如下：

npm install element-plus --save

② 完整引入与安装，在入口文件 main.js 中完整引入 Element Plus 框架并安装。修改 main.js 文件，具体代码如下：

import { createApp } from 'vue';
import App from './App.vue';

// 完整引入Element Plus框架
import ElementPlus from 'element-plus';
// 完整引入Element Plus框架的样式文件
import 'element-plus/dist/index.css';

// 安装Element Plus框架
createApp(App).use(ElementPlus).mount('#app');

3) 删除 App.vue 文件中的所有代码，同时删除 components 目录下的 HelloWorld.vue 文件。在 App.vue 文件中使用 Element Plus 框架最简单的按钮组件进行测试。修改后的 App.vue 文件代码如下：

<template>
  <el-button @click="handleClick">Default</el-button>
</template>

<script setup>
const handleClick = () => {
  alert('响应点击');
};
</script>

运行项目，我们会发现页面中能够成功显示一个 Element Plus 框架的按钮组件，点击按钮显示警告提示。这一过程远远比开发者自己编写按钮和样式代码更快捷、更简便。

按钮的初始样式如下图所示：


按钮被点击后的样式如下图所示：


现在对项目进行产品化打包处理，查看完整引入 Element Plus 框架后项目的整体体积，命令如下：

npm run build

我们在使用 Element Plus 框架之前和之后分别运行上面的命令，对控制台输出的打包文件大小的日志进行截图，对比打包文件大小，如下图所示。


从图 3 中可以看出，打包生成的 JavaScript 文件增大了，超过 750KB（KB 是 KiB 的简写），多出了超过 312KB 的 CSS 文件。原因很简单，虽然我们只使用了 Element Plus 框架的一个 Button 组件，但默认在打包时，Element Plus 框架会将内部包含的所有组件的 JavaScript 和 CSS 代码都打包进来。这样就会导致项目最终产生的打包文件过大，下面我们要使用 Element Plus 框架提供的按需引入打包操作来缩小打包文件。

值得一提的是，文件大小不是完全固定的，尤其是当时间相差比较大时，就会出现文件大小不一样的情况，读者不必纠结。

Element Plus框架的按需引入打包操作

Element Plus 框架的按需引入打包操作只需进行简单的插件安装与环境配置即可，代码部分将由安装的插件自动完成解析。

按需引入打包操作只需 3 步即可实现：
1) 在项目中安装 unplugin-vue-components 和 unplugin-auto-import 插件，命令如下：

npm install unplugin-vue-components unplugin-auto-import --save-dev

2) 修改 vite.config.js 配置文件，将框架引入，并调用对应插件。修改后的 vite.config.js 文件代码如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// 引入Element Plus框架按需引入打包的辅助插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 使用Element Plus框架按需引入打包的辅助插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: [ { find: '@', replacement: resolve(__dirname, 'src') } ],
    extensions: ['.js', '.vue'],
  },
})

3) main.js 文件代码如下：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

再次运行项目，可以发现页面中的按钮仍旧应用 Element Plus 框架的组件样式。再次通过执行“npm run build”命令打包项目，对控制台输出的打包文件大小的日志进行截图，对比打包文件大小，如下图所示：


从图 4 中可以看出，打包生成的 JavaScript 文件大小缩小了 720KB 以上，CSS 文件大小缩小了 280KB 以上。

原因很简单，就是按需引入并没有打包 Element Plus 框架包含的所有组件的 JavaScript 和 CSS 代码，只是按需引入打包了使用的 Button 组件的代码。这样项目总的打包文件就会被极大地缩小，应用能更快地加载显示，提升用户体验。

设计业务需求页面

绝大多数中后台管理系统项目的页面会包含菜单、导航、列表等常用展示元素，那么利用 Element Plus 框架是否能够快速地实现这样的功能需求呢？笔者想，或许只需几分钟就可以实现。

菜单部分的布局可以使用 Icon（图标），使用图标可以让页面更加直观和美观，这里需要安装 Element Plus 框架中的图标组件，命令如下：

npm install @element-plus/icons-vue --save

在 Element Plus 官方文档中找到 Container 布局容器，如下图所示：


将对应的布局容器示例代码进行复制，并粘贴到 App.vue 文件中，将原有代码进行替换，其余文件不需要做任何修改。

运行项目后，显示的效果与示例展示的效果完全一致，相信读者可以感觉到使用框架节省了很多时间，如下图所示：


值得一提的是，Element Plus 框架主要适应于 PC 端，尤其是中后台管理系统项目，如果将当前的应用切换至移动端，页面显示就不一定会如预期那么完美了。

我们来简单测试下，其页面效果如下图所示：


如果读者想快速应用 Element Plus 框架搭建项目页面，则可以参考其官方文档中各个组件的示例和 API 说明。