element-ui 是共同 vue2 使用，element-plus 是设置 vue3 使用的
1. 安装
1. 包管理器的方式
如果是使用 webpack 大概 vite 打包工具新建的项目
- # NPM
- npm install element-plus --save
- # Yarn
- yarn add element-plus
直接通过欣赏器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus
- <head>
- <!-- 导入样式 -->
- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
- <!-- 导入 Vue 3 -->
- <script src="//unpkg.com/vue@3"></script>
- <!-- 导入组件库 -->
- <script src="//unpkg.com/element-plus"></script>
- </head>
1. 导入全部组件且注册所有的图标
- // 导入 element-plus
- import ElementPlus from "element-plus";
- // 导入 element-plus 样式
- import "element-plus/dist/index.css";
- // 导入 element-plus 图标
- import * as ElementPlusIconsVue from "@element-plus/icons-vue";
- // 注册所有图标
- for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component);
- }
- // 使用router\vuex\element-plus并挂载
- app.use(ElementPlus).use(router).use(store).mount("#app");
- // 导入 vue 和 createApp 方法import App from "./App.vue";import { createApp } from "vue";// 导入路由表import router from "../router/index";// 导入 vueximport store from "../store/index";// 导入 element-plusimport ElementPlus from "element-plus";// 导入 element-plus 样式import "element-plus/dist/index.css";// 导入 element-plus 图标import * as ElementPlusIconsVue from "@element-plus/icons-vue";// 导入全局样式import "@/styles/index.scss";// 创建 vue 实例const app = createApp(App);// 使用router\vuex\element-plus并挂载
- app.use(ElementPlus).use(router).use(store).mount("#app");// 注册所有图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component);}
完成这个功能需要插件的支持，想相识更多插件的知识 ->webpack_插件plugin_游小北的博客-CSDN博客大概webpack打包工具 & 搭建vue项目_游小北的博客-CSDN博客
1. 安装插件
- npm install -D unplugin-vue-components unplugin-auto-import
- // webpack.config.js
- const AutoImport = require('unplugin-auto-import/webpack')
- const Components = require('unplugin-vue-components/webpack')
- const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
- module.exports = {
- // ...
- plugins: [
- AutoImport({
- resolvers: [ElementPlusResolver()],
- }),
- Components({
- resolvers: [ElementPlusResolver()],
- }),
- ],
- }
- // vite.config.ts
- import { defineConfig } from 'vite'
- 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: [
- // ...
- AutoImport({
- resolvers: [ElementPlusResolver()],
- }),
- Components({
- resolvers: [ElementPlusResolver()],
- }),
- ],
- })
安装
1. 包管理器方式
- # NPM
- npm install @element-plus/icons-vue
- # Yarn
- yarn add @element-plus/icons-vue
- # pnpm
- pnpm install @element-plus/icons-vue
通过欣赏器的 HTML 标签导入，使用全局变量 ElementPlusIconsVue。
- <script src="//unpkg.com/@element-plus/icons-vue"></script> //unpkg
- <script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script> //jsDelivr
以标签的形式直接使用
- <el-icon><Plus /></el-icon>
- <el-icon><Minus /></el-icon>
- <el-icon><CirclePlus /></el-icon>
- <el-icon><Search /></el-icon>
来源：https://blog.csdn.net/m0_66492535/article/details/128048780
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
