最近在自学Vue3，打算做一个纯前端的小东西，记录一下element-plus的安装和使用。以下是安装使用过程，以及踩过的坑。
一、安装element-plus及icon
npm i element-plus @element-plus/icons-vue -S二、安装按需导入的插件
npm i unplugin-auto-import unplugin-vue-components unplugin-icons -D三、配置vite.config.js
我是从官网上拷贝的配置内容，官网配置文件地址 其中 “import Inspect from 'vite-plugin-inspect'” 我本地飘红，网上也搜索不到就删掉了
import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
resolve: {
alias: {
'@': pathSrc,
},
},
plugins: [
Vue(),
AutoImport({
// Auto import functions from Vue, e.g. ref, reactive, toRef...
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ['vue'],
// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
resolvers: [
ElementPlusResolver(),
// Auto import icon components
// 自动导入图标组件
IconsResolver({
prefix: 'Icon',
}),
],
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
}),
// Auto register Element Plus components
// 自动导入 Element Plus 组件
ElementPlusResolver(),
],
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Icons({
autoInstall: true,
}),
],
})四、踩过的坑
1、can not find module 'path'，从官网拷贝回来的配置文件第一行就飘红了，网上找的解决方案
npm install -D @types/node2、按照官网配置以后，icon图标不显示，浏览器控制台还出现了警告：“ [Vue warn]: Failed to resolve component: edit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. ”
也是百度查询的解决方案。修改icon的写法：在原来icon写法的基础上增加 i-ep-前缀
<i-ep-location/>3、按照上述都进行了设置，在修改icon的写法的时候，发现 @iconify-json/ep 会自动安装上。等待安装结束以后一切就正常了
4、动态生成侧边栏菜单时icon不显示
在静态显示图标成功以后，我在路由中设置的图标名称加了前缀i-ep-，并使用了<component>动态组件来渲染图标，以下是最开始的写法。结果icon还是没有渲染出来。
name: 'home',
path: '/home',
component: () => import('../../views/home/index.vue'),
meta: { title: '首页', icon: 'i-ep-House' },<el-icon><component :is="item.meta.icon"/></el-icon>在百度上搜了一圈以后发现是因为在vue3中 component需要用使用:is动态绑定组件，而不是简单的字符串了。将icon名称重新修改，去掉引号，并且修改前缀为IconEp后问题解决。如下所示：
name: 'home',
path: '/home',
component: () => import('../../views/home/index.vue'),
meta: { title: '首页', icon: IconEpHouse },参考文章地址
