最近在自学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 },参考文章地址
