一、使用element-plus icon图标时,出现警告
在用vue3写后台管理系统时,使用element-plus icon图标时,页面没有显示出来,控制台警告: [Vue warn]: Failed to resolve component。
二、出现警告原因
出现这个原因是因为页面中使用了<el-icon><Management /></el-icon>这个icon图标,但是没有在script中没有按需引入使用的icon图标的名Management:
三、解决问题
在import中引入Management(icon图标名),页面中的icon就能出现了:
四、总结
element-plus Vue3使用icon图标时,需要先在集成终端安装,
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
然后选择全局导入(参考官网)或者按需导入:
npm install -D unplugin-vue-components unplugin-auto-import
使用icon图标 需要再次安装:
npm install @element-plus/icons-vue -S
页面中使用icon图标,script中引入对应的icon图标名,就可以啦。