Vue3引入Element Plus的Icon

一、安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

二、查看package.json是否安装成功

在package.json中的dependencies出现icons-vue的版本号

  "dependencies": {
    "@element-plus/icons-vue": "^2.0.9"
  },

三、在main.js中全局注册（TS和JS二选一）

1、TypeScript

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

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

2、JavaScript

        首先注意的是，如果你main.js里面，只有一行像这样的语句的话，需要先拆分：

createApp(App).use(router).use(ElementPlus).mount('#app')

将app单独声明，去掉use(router)前面所有东西

const app = createApp(App)

然后引入依赖

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

最后全局注册

// 全局注册el-icon
for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(name, component);
}

最终的main.js差不多就这样（其中的router什么的，如果用不到，可以忽视）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
// 全局注册el-icon
for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(name, component);
}

app.use(router).use(ElementPlus).mount('#app')

四、使用方式

 

 分别对应如下代码：

 Element Plus官网还有很多，点击复制就行了