使用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.js
import { 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')
这样使用就方便多了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。