vue3使用element-plus

element-ui 是配合 vue2 使用，element-plus 是配置 vue3 使用的

1. 安装

1. 包管理器的方式

如果是使用 webpack 或者 vite 打包工具新建的项目

1. # NPM
2. npm install element-plus --save
4. # Yarn
5. yarn add element-plus

2. 浏览器直接导入

直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus

3. <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
5. <script src="//unpkg.com/vue@3">script>
7. <script src="//unpkg.com/element-plus">script>

2. 导入使用

1. 导入全部组件且注册所有的图标

1. // 导入 element-plus
2. import ElementPlus from "element-plus";
3. // 导入 element-plus 样式
4. import "element-plus/dist/index.css";
5. // 导入 element-plus 图标
6. import * as ElementPlusIconsVue from "@element-plus/icons-vue";
7. // 注册所有图标
8. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
9. app.component(key, component);
10. }

声明使用 ElementPlus 全局变量

1. // 使用router\vuex\element-plus并挂载
2. app.use(ElementPlus).use(router).use(store).mount("#app");

项目完整的 main.js 文件

1. // 导入 vue 和 createApp 方法
2. import App from "./App.vue";
3. import { createApp } from "vue";
4. // 导入路由表
5. import router from "../router/index";
6. // 导入 vuex
7. import store from "../store/index";
8. // 导入 element-plus
9. import ElementPlus from "element-plus";
10. // 导入 element-plus 样式
11. import "element-plus/dist/index.css";
12. // 导入 element-plus 图标
13. import * as ElementPlusIconsVue from "@element-plus/icons-vue";
14. // 导入全局样式
15. import "@/styles/index.scss";
16. // 创建 vue 实例
17. const app = createApp(App);
18. // 使用router\vuex\element-plus并挂载
19. app.use(ElementPlus).use(router).use(store).mount("#app");
20. // 注册所有图标
21. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
22. app.component(key, component);
23. }

2. 按需导入

完成这个功能需要插件的支持，想了解更多插件的知识 ->webpack_插件plugin_游小北的博客-CSDN博客或者webpack打包工具 & 搭建vue项目_游小北的博客-CSDN博客

1. 安装插件

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

2. 在 webpack.config.js 里添加如下配置

1. // webpack.config.js
2. const AutoImport = require('unplugin-auto-import/webpack')
3. const Components = require('unplugin-vue-components/webpack')
4. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
6. module.exports = {
7. // ...
8. plugins: [
9. AutoImport({
10. resolvers: [ElementPlusResolver()],
11. }),
12. Components({
13. resolvers: [ElementPlusResolver()],
14. }),
15. ],
16. }

如果使用的是 vite 

1. // vite.config.ts
2. import { defineConfig } from 'vite'
3. import AutoImport from 'unplugin-auto-import/vite'
4. import Components from 'unplugin-vue-components/vite'
5. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
7. export default defineConfig({
8. // ...
9. plugins: [
10. // ...
11. AutoImport({
12. resolvers: [ElementPlusResolver()],
13. }),
14. Components({
15. resolvers: [ElementPlusResolver()],
16. }),
17. ],
18. })

3. elemetn-plus 图标的使用

安装

1. 包管理器方式

1. # NPM
2. npm install @element-plus/icons-vue
3. # Yarn
4. yarn add @element-plus/icons-vue
5. # pnpm
6. pnpm install @element-plus/icons-vue

2. 标签导入

通过浏览器的 HTML 标签导入，使用全局变量 ElementPlusIconsVue。

1. //jsDelivr

3. 使用方式

以标签的形式直接使用

1. <el-icon><Plus />el-icon>
2. <el-icon><Minus />el-icon>
3. <el-icon><CirclePlus />el-icon>
4. <el-icon><Search />el-icon>