VUE3项目element-plus的icons全局引入和按需引入的打包比较

最新推荐文章于 2024-03-25 17:42:59 发布
最新推荐文章于 2024-03-25 17:42:59 发布
阅读量572 收藏
点赞数
分类专栏： Vue3.X ElementPlus 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yusirxiaer/article/details/133071906
版权

最近又搞vue3项目了，不太情愿的使用element-plus，看到官网上使用icon只有全局循环注册所有icon的配置，很奇怪，不会增大包体积么，简单测试下.

新建两个项目都是全局引入element-plus（懒得设置按需导入，官网有简单）

一、全局引入@element-plus/icons-vue所有icon

页面中使用几个icon

vite打包大小

二、按需引入icon的同样的初始化项目

在组件文件内引入icon和使用同样icon

打包结果

三、结论

打包生成的index.js文件大了1034.41k-861.17k = 173.24k
所以按需引入icons，包体积更小呀！全局导入除了方便点还有啥特别之处？

yusirxiaer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3新建项目，配置路由vue-router，引入element-plus
01-08
vue3新建项目，配置路由vue-router，引入element-plus
vue3项目使用Element Plus icon库：统一导入、全局注册组件
web18224617243的博客
03-06 1727
尝试使用Element Plus提供的icon，记录一下在安装和使用中遇到的问题 前排注意，从1.2.0-beta.1版本开始不再包含Font Icon 下载 npm install @element-plus/icons-vue 如果下载较慢可以使用淘宝镜像 npm install @element-plus/icons-vue --registry https://registry.npm.taobao.org 注册组件 下载完成后，需要注册组件，才可以使用 可以全局注册，也可以在要用到的组件里单独
【已解决】vue3+ts使用Element-Plus icon图标不显示|element plus 使用 icon 图标教程
最新发布
肥晨开发的学习之路
03-25 2427
Element Plus 的图标组件也支持自定义图标。你可以通过 el-icon 组件的 name 属性来指定一个自定义图标的类名，并在你的 CSS 中定义这个类名对应的图标样式。/* 或者使用字体图标 *//* 其他样式 */确保你的自定义图标样式正确无误，并且图标的路径也是正确的。如果你使用的是字体图标，你可能需要设置 font-family 和其他相关属性。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
element-plusicons vue3 统一导入及注册全局el-icon组件 element-plus 2.1.4
愤怒的阿木木的博客
03-24 1635
安装详细请查看element-plus官方文档 注意：当前图标只适用于vue3。 全局注册： import { createApp } from 'vue' import App from './App.vue' //全局注册element-plus import ElementPlus from 'element-plus'; import "element-plus/theme-chalk/index.css"; //统一导入及注册全局el-icon组件 import * as icons from '
element-plus/icons vue3 统一导入及注册全局el-icon组件 element-plus1.2.0版本
weixin_43312080的博客
11-27 1万+
统一导入及注册全局el-icon组件 element-plus1.2.0版本 Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。 下面全局引用 -main.js import ElementPlus from 'element-plus' import * as icons from '@element-plus/icons' const app=
vue学习笔记 element-plus/icons-vue el-menu动态菜单(路由)
xjcwzp的专栏
01-07 3381
element-plus/icons-vue 动态菜单(路由) 绑定icon
el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件 在各带图标组件中使用 component组件动态加载图标
热门推荐
Alloom的博客
08-05 3万+
2021.8.5 Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。 文档：组件 | Element (element-plus.org) 注意：当前图标只适用于vue3。 首先更新 element-plus版本，指定安装@1.0.2-beta.69（2021.8.5时的最新版...
在vue3项目中引入element-plus的Icon图标
weixin_44775694的博客
05-21 1万+
Element Plus 是为适配 Vue3 而对 Element UI 进行重构后产生的前端组件库，包含丰富的基础组件。官方网址为：一个 Vue 3 UI 框架 | Element Plus 在Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单等，接下来是引入在vue3项目中引入Icon图标的步骤。 安装（使用包管理器）： # 选择一个你喜欢的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ y...
Vue3引入Element Plus的Icon
帅帅气气的黑猫警长
09-18 1万+
Vue3使用Element Plus的Icon
从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify
immocha的博客
05-15 4724
iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的这个个人仓库，决定尝试更多图标解决方案。除了使用Element Plus自带的图标，iconify是本次尝试的主要目的。
Vue3中element-plus全局使用Icon图标
yuliwen0418的博客
11-23 2万+
Vue项目中使用Element-plus的Icon图标 1、安装图标库 npm install @element-plus/icons 2、注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app = createA
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
vue3使用element-plus搭建后台管理系统---菜单管理
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 :red_apple: 尝试 $ git clone https://github.com/ntnyq/element-plus-admin.git $ cd element-plus-admin $ npm...
vue3中websocket用法
YUSIR 完美CODING世界
09-12 1万+
1.0 认识 websocket #1.0.1 什么是 websocket 和 http 协议类似，websocket 也是是一个网络通信协议，是用来满足前后端数据通信的。 #1.0.2 websocket 相比于 HTTP 的优势 HTTP 协议：客户端与服务器建立通信连接之后，服务器端只能被动地响应客户端的请求，无法主动给客户端发送消息。 websocket 协议：客户端与服务器建立通信连接之后，服务器端可以主动给客户端推送消息了！！！ #1.0.3 websocket 主要的应用场景 需
vue3.x通过ref属性获取元素
YUSIR 完美CODING世界
03-13 4414
在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素 然而在vue3中时没有$refs这个东西的，因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取vue3需要借助生命周期方法，原因很简单，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。 <template> <div ref='box'>I am DIV</div&gt.
Vue3里的setup中使用vuex
YUSIR 完美CODING世界
04-15 3367
useStore 这里我们可以直接从vuex 4.X中解构出useStore方法，就可以在setup中使用vuex的相关函数 template 使用$store <template> <div> <h2>{{ $store.state.count }}</h2> <button @click="increaseCount">点击</button> </div> </template&gt
vue3+TypeScript封装echarts5组件
YUSIR 完美CODING世界
03-13 2376
https://blog.csdn.net/qq_38330707/article/details/111497853 有用mark 等抽时间写个vue+TS+echarts5.0的组件文章
vue3引入element-plus
06-28
### 回答1： Vue3可以通过以下步骤引入element-plus： 1. 安装element-plus：可以使用npm或yarn进行安装，例如： ``` npm install element-plus --save ``` 2. 在main.js中引入element-plus： ``` import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 3. 在组件中使用element-plus的组件，例如： ``` <template> <el-button>按钮</el-button> </template> <script> export default { name: 'MyComponent' } </script> ``` 在这个例子中，我们使用了element-plus的按钮组件。 ### 回答2： Vue 3是当前最新的Vue版本，它带来了一些新的变化和改进。随着新版本的发布，许多Vue的插件也相继更新和升级，其中最受欢迎的莫过于Element-UI。今天我们要讨论的是，Vue 3引入Element-Plus的原因以及它的特点和优势。 Element-UI是Vue社区中最著名的开源UI库之一，它提供了许多符合人性化的组件，例如按钮、表格、表单等等。Element-UI在Vue 2的时代广受欢迎，许多开发者都喜欢使用Element-UI来构建他们的应用程序界面。随着Vue 3的发布，很多开发者非常期待Element-UI能够尽快推出Vue 3的版本，以便使用最新的Vue特性来提高应用程序的性能。 Element-Plus的出现正是为了满足这个需求，它是Element-UI的升级版，支持Vue 3和Composition API。它保留了Element-UI的所有优点，同时呈现新的特性和改进。下面是介绍Element-Plus的主要特点： 1. 支持Vue 3和Composition API：Element-Plus在设计时考虑了Vue 3的新特性，并支持全新的Composition API，可以帮助开发者更好地组织他们的代码。 2. 更好的性能：通过使用Vue 3的新特性，例如Proxy和Tree-shaking，Element-Plus实现了更好的性能和更小的代码体积。 3. 规模化扩展：Element-Plus提供了许多新的组件，例如Avatar、Badge、Loading等等，这使得在大型项目中使用Element-Plus变得更加容易。 4. 更好的主题支持：Element-Plus提供了更加灵活的主题和色彩方案，可以帮助开发者更好地自定义他们的应用程序。 5. 全局组件注册：Element-Plus在设计时考虑到了Vue 3的新特性，可以通过defineAsyncComponent、defineComponent等全局API来注册组件，从而提高了性能和维护性。 总的来说，Vue 3引入Element-Plus是件好事。Element-Plus既保留了Element-UI的所有优点，同时采用了许多Vue 3的新特性，从而提供了更好的性能和更好的可扩展性。对于Vue 3的开发者而言，使用Element-Plus可以简化他们的开发任务，提高效率。 ### 回答3： Vue 3引入Element Plus，这是一个非常值得期待的举措。Element Plus是一个非常受欢迎的Vue 2组件库，拥有丰富的UI组件和强大的功能，这使得Element Plus不仅在国内，更在全球范围内受到开发者的喜爱，并且广泛应用于各种应用中。随着Vue 3的发布，Element Plus也随之进行了升级，并补充了与Vue 3相容的新特性。Vue 3的发布具有向下兼容性，这使得为Vue 2设计的组件库需要进行适配，而引入Element Plus则可以省略这一步，因为它已经在Vue 3下进行了优化适配，这将使得开发者更加方便快捷的开发出基于Vue 3的应用。 除此之外，Element Plus支持TypeScript，这是一种强类型语言。TypeScript提供了许多语言特性，例如类型推导、装饰器等，这些都可以使开发人员更加轻松地编写代码和进行调试，降低了代码的错误率，从而提高了开发效率。 另外，由于Vue 3的性能优化和响应式系统的升级，Element Plus具有更快的渲染速度和更小的组件体积，这为开发者提供了更好的用户体验。此外，Element Plus也为Vue 3提供了更多的选择，使得开发人员拥有更多的选择来构建一个高品质的Web应用程序。 总而言之，Vue 3引入Element Plus是一个非常好的决策。通过这样的操作，使得Element Plus得以兼容Vue 3，并添加新特性，同时也提供了更好的性能和更好的用户体验。这将为开发人员提供更好的开发体验和更好的组件选择，使得开发人员更容易地构建出优质的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值