electron+vue3全家桶+vite项目搭建【三】按需引入element-plus图标

原创 已于 2023-04-04 22:31:33 修改 · 2.6k 阅读 · 1
标签
#electron #javascript #vue.js #vue3全家桶
于 2023-04-01 23:24:01 首次发布

文章目录

引入

视频讲解
demo项目地址
既然element-plus我们已经配置好了按需引入，那么图标咱们也走按需引入，让打出的包尽可能的小。
官网图标配置

1.安装依赖

npm install @element-plus/icons-vue
npm i -D unplugin-icons

2.配置自动导入

然后我们参考element提供的配置模板

请添加图片描述

调整vite.config.ts

// ...
import Icons
最低0.47元/天 解锁文章
vue3 自动下载使用 iconify图标以及自定义svg图标
xw245184020的专栏
10-11 2427
自定义图标只要下载svg 文件到 assets/icons 文件夹下，自定义图标 通过icon-图标名称访问，iconify图标通过i-图标来源-图标名称访问 i-ep-edit i-ant-design-user。开发中经常使用图标，通过unplugin-icons 插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。vite.config.ts配置。unocss.config.ts配置。
electron+vue3全家桶+vite项目搭建【二】vite自动引入插件，按需引入element-plus
个人网站：https://www.longzipeng.online
03-31 3132
electron+vue3全家桶+vite项目搭建【二】vite自动引入插件，按需引入element-plus
@fuxishi/svg-icon：一个 Vue 3 svg本地图标+iconify图标组件库，让图标管理不再头疼
最新发布
人间真的不值得的博客
05-03 544
支持 Iconify 海量图标集 + 本地 SVG，内置多 UI 框架图标选择器预设，Vite 插件自动生成精确类型
使用electron-vite +Vue+ElementPlus开发跨平台桌面应用
duzm200542901104的专栏
02-27 3749
使用electron-vite +Vue+ElementPlus开发跨平台桌面应用，实现ES友好的客户端
vite4.x+vue3.2x+element-plus2.3x,使用 unplugin-icons图标库动态渲染图标
cjycp888的博客
04-08 1511
【代码】vite4.x+vue3.2x+element-plus2.3x,使用 unplugin-icons图标库动态渲染图标。
解决element plur的icon图标的无法按需引入的问题
m0_68320270的博客
09-20 1161
/element 组件的按需引入。再说一些组件使用注意的问题吧。//按需引入icon图标组件。//安装icon图标组件。
electron + vite + vue3的框架搭建
weixin_64282111的博客
06-27 1774
之前已经了解过了Electron的基本语法，现在搭建一个electron + vite + vue3的初步框架。
electron+vue3全家桶+vite项目实战【三】vite插件优化：自动引入与按需加载element-plus组件
bert9linguist的博客
02-18 201
本文详细介绍了在Electron+Vue3+Vite项目中，如何通过配置unplugin-auto-import和unplugin-vue-components插件，实现Element Plus组件的自动引入与按需加载。该方案能显著提升开发效率，同时优化最终打包体积，并提供了进阶配置技巧以解决样式引入、类型声明管理等常见问题。
超详细！！！electron-vite-vue开发桌面应用之引入UI组件库element-plus（四）
qq_43206280的博客
08-14 2212
unplugin-auto-import是一个用于Vue.js的插件，它可以自动导入Vue.js的相关API，如Vue自身，Vue的RFC(响应式)，Composition API，以及其他一些常用的Vue功能。unplugin-vue-components是一个用于Vue.js的插件，它允许你导入Vue组件，而不需要在你的代码中显式地导入它们。这个插件可以让你按需导入组件，从而减少初始加载大小。
【electron+vite+vue3】项目搭建
占星安啦的博客
10-24 550
electron文档vite+electron+vue3 搭建参考。
@iconify/vue离线引入图标
lidong0101的博客
05-10 3114
以引入 element-plus 图标为例。现在 package.json 引入。然后写个组件 Icons。然后在调用的地方引入组件。
Vue3使用Element-plus
IT菜鸟
02-23 4897
此处 Vue3 使用了 Vite 构建工具 ，没有使用 webpack。
element plus图标全局加载与自动导入
Light_10的博客
11-22 565
使用示例：<i-ep-edit />
Element Plus Icon图标自动引入
m0_61172937的博客
02-11 4838
element plus icon图标自动引入问题
vite+vue3使用element-plus图标方案
Cipher_Y的博客
07-18 2423
自从Vue发布了3x版本后，Element UI也发布了对应的组件库版本，图标使用上也发生了改变，特意记录下，希望可以帮到大家!PS:抛弃了字体图标的用法，直接使用了svg的方式。并且需要单独下载如果文章对你有帮助，可以，如果大家有更好意见或方案，欢迎评论区指出。
icon解决方案(iconify)，基于unplugin-icons封装通用icon组件
m0_74382023的博客
05-20 4644
对于icon，前端的第一反应就是采用iconfont来做，对于多数场景当然是没有问题的，甚至后续项目中出现自定义icon只需要ui将设计传到iconfont平台就行了，但是毕竟还是经过了第三方平台的，所以我采用了iconify方案。
element-plus icon图标按照文档说明自动引入失败
weixin_43925630的博客
08-11 907
今天用element-plus的icon。想要配置自动引入，发现配完之后不起效果。
如何将 Iconify 图标库本地化加载（以 ri/ep/fa 为例）
qq_54031712的博客
07-11 758
重启项目或者重新打包之后,刷新页面,在控制台network面板可以看到,icon请求的路径就已经变成了本地的路径。最后在vite.config.ts中进行配置。然后安装vite插件。
element-plus按需引入报错IconsResolver is not a function
Beamon__的博客
11-05 918
Element Plus Best Practices 最佳实践. Contribute to sxzz/element-plus-best-practices development by creating an account on GitHub.运行结果：TypeError: IconsResolver is not a function。解决方式：安装低版本unplugin-icons。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值