福州网站建设公司哪家比较好,网站如何做的看起来高大上,最好玩的网站,视频生成网址链接最近在自学Vue3#xff0c;打算做一个纯前端的小东西#xff0c;记录一下element-plus的安装和使用。以下是安装使用过程#xff0c;以及踩过的坑。
一、安装element-plus及icon
npm i element-plus element-plus/icons-vue -S
二、安装按需导入的插件
npm i unplugin-… 最近在自学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/resolversconst 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/node
2、按照官网配置以后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-iconcomponent :isitem.meta.icon//el-icon
在百度上搜了一圈以后发现是因为在vue3中 component需要用使用:is动态绑定组件而不是简单的字符串了。将icon名称重新修改去掉引号并且修改前缀为IconEp后问题解决。如下所示 name: home,path: /home,component: () import(../../views/home/index.vue),meta: { title: 首页, icon: IconEpHouse },
参考文章地址
