教程2 Vue3中引入Element Plus

1、Element Plus简介

Element Plus官网：https://element-plus.gitee.io/zh-CN/

Element Plus是一个基于Vue.js 3.0的开源UI组件库，是Element UI的升级版。它提供了一套简单、易用且高效的组件，包括表单、表格、弹窗、日期选择器、分页、步骤条等常用组件。Element Plus不仅提供了基本的样式和功能，还提供了丰富的主题和自定义选项，可以轻松定制化组件样式和行为。

2、与Element Plus类似的其他组件库

除了Element Plus之外，还有许多其他的优秀的UI组件库可以选择，下面是一些类似Element Plus的组件库：

（1）Ant Design Vue

Ant Design Vue官网：https://www.antdv.com/components/overview-cn

Ant Design Vue是一个基于Vue.js的企业级UI组件库，提供了一系列高质量的组件和模板，具有易用性、高度可定制性、美观性等特点。

（2）Vuetify

Vuetify官网：https://vuetifyjs.com/en/components/all/

Vuetify是一个基于Vue.js的Material Design组件库，提供了丰富的UI组件和特效，可以快速创建美观、响应式的Web应用。

（3）Bootstrap Vue

Bootstrap Vue官网：https://bootstrap-vue.org/docs/components

Bootstrap Vue是一个基于Vue.js的Bootstrap组件库，提供了一系列响应式、易用、可扩展的组件和指令，可以快速构建美观的Web应用。

（4）PrimeVue

PrimeVue官网：https://primevue.org/installation

PrimeVue是一个基于Vue.js的UI组件库，提供了一系列功能丰富、易用、高度可定制的组件，包括表单、表格、图表等常用组件。

（5）Quasar

Quasar官网：https://quasar.dev/

Quasar是一个基于Vue.js的多平台UI组件库，支持Web、移动端、桌面端等多种平台，提供了一系列高质量、易用、可扩展的组件和工具。
这些组件库都有其独特的特点和优势，开发者可以根据自己的需求选择适合自己的组件库。

3、在Vue3中引入Element开发环境

（1）引入Element开发环境

npm install element-plus --save
npm i -D unplugin-auto-import
npm i -D unplugin-vue-components
1
2
3

（2）自动引入Element

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

（3）在配置文件中进行配置，本人使用的是Vit构建工具

如果使用Vite作为构建工具，配置文件为vite.config.js，配置方法如下：

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

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

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

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },

  server: {
    port: 8080,
  },
});


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

4、在Vue中引入Element Plus图标

（1）安装element-plus图标

npm install @element-plus/icons-vue
1

（2）Element Plus图标全局引入【推荐】

main.js中增加下面的代码：

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
// 统一导入el-icon图标
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(ElementPlus);
app.mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14

（3）使用Element Plus带图标的组件

  <el-input v-model="user.name" class="w-50 m-2" placeholder="请输入姓名">
          <template #prefix>
            <el-icon class="el-input__icon">
              <search />
            </el-icon>
          </template>
        </el-input>
1
2
3
4
5
6
7

（4）带图标组件举例