关于element-ui:Element-plus-图标使用

应用vue3引入Element plus，应用icon时发现没有失常渲染到页面上。到官网查看后发现，如果你想像用例一样间接应用，你须要全局注册组件，才可能间接在我的项目里应用。

单个图标引入

你能够在单个组件中像上面的形式引入：

<template>  <el-menu      active-text-color="#ffd04b"      background-color="#545c64"      class="el-menu"      default-active="2"      text-color="#fff"      @open="handleOpen"      @close="handleClose"  >    <el-sub-menu index="1">      <template #title>        <el-icon><location /></el-icon>        <span>Navigator One</span>      </template>    </el-sub-menu>  </el-menu></template><script>import { Location } from '@element-plus/icons-vue'export default {  name: "SideMenu",  components: {    Location  }}</script>

全局注册为组件

然而每次都这样做显然过于繁琐，咱们能够应用上面的形式把icon全局注册为组件：

// main.jsimport { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import * as ElIcons from '@element-plus/icons-vue'import App from './App.vue'const app = createApp(App)// 对立注册Icon图标for (const iconName in ElIcons) {    app.component(iconName, ElIcons[iconName])}app.mount('#app')

这样应用就不便多了。