element-plus图标（icon）安装(typescript)

最新推荐文章于 2023-12-22 19:41:04 发布
最新推荐文章于 2023-12-22 19:41:04 发布
阅读量452 收藏
点赞数 3
分类专栏： vue 前端 文章标签： elementui vue typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianOye/article/details/130870422
版权
vue 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
前端
7 篇文章 0 订阅
订阅专栏

(1)命令行输入pnpm install @element-plus/icons-vue，等待安装

 （2）在main.ts 中导入挂载

（3）在一个vue中使用图标（这里莫名其妙爆红说没使用导进来的东西，但实际上能出现效果，直接不管）

 

（4）启动项目，查看效果

 

0.0？
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-plus踩坑日记icon vite配置icon真的费老鼻子力气了
m0_58039950的博客
05-23 1696
各个框架图标遍历玩法 免费的框架往往是最贵的,谁用谁知道,浪费了太多配置的时间,一个破ICON能把人折腾死.今天你饿了么? element-plus 安装element-plus pnpm install element-plus -D 效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1WZY38tz-1653318306758)(C:\Users\jpruby\AppData\Roaming\Typora\typora-user-images\image-202
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 ...
ElementPlus与icon图标自动导入
最新发布
知识共享
12-22 1543
安装了ElementPlus后，你需要安装和这两款插件。
element-plus SVG Icon 注册方法 @element-plus/icons vue3 main.js统一导入及注册el-icon组件
WEB前端大咖
11-12 2630
element-plus SVG Icon 注册方法 @element-plus/icons vue3 main.js统一导入及注册el-icon组件安装element-plus SVG图标库Main.js 安装element-plus SVG图标库 npm install @element-plus/icons Main.js import ElementPlus from 'element-plus'; import * as ElIcons from '@element-plus/icons';
4、icon图标安装及布局引入
weixin_51915021的博客
05-07 1112
Vue3 + .net core6 WebAPI前后端分离
【vue3 TypeScript 使用 element-plus的icons组件注册】
weixin_46659355的博客
03-15 2024
vue3 TypeScript 使用 element-plus的icons组件注册第一步第二步 element-plus的icon是以组件的形式使用的,需要在用到的页面单独引入注册的,如果一个页面要用到很多的icon,而且大多数页面都需要用到icon,这样的情况下单独引入就显得不那么友好友好了,这样我们就需要批量注册了 (如下代码拿来直接可以用) 第一步 创建ts文件内容如下 import * as icons from "@element-plus/icons" const importFn = requ
elementui表单el-form-item的label旁加icon并加提示
weixin_38761920的博客
05-27 1万+
原代码： <el-form-item prop="name" :label="$t('JieKouYingWenMingCheng')"> <el-input v-model="addInfo.name" :placeholder="$t('QingShuRu')" :disabled="isQuote"></el-input> </el-form-item> 解决方法 去掉 上面的
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能vue-cli版： : vite版： :系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
abp-vue-admin-element-typescript:带有ABP的Vue管理员
03-29
这是一个基于 typescript 的Abp框架后台管理界面 前端文档 截图 相关项目 初步项目 （abp vNext） （EasyAbp） 打字稿版本： （此项目的模拟服务器） （该项目的文档来源） Javascript版本： （vue2.0最小...
vue-typescript-admin-element-ui:基于Vue + typescript版的后台管理系统模板
03-11
vue-typescript-admin-element-ui 基于Vue + typescript版的后台管理系统模板。 项目预览 分享不易，喜欢的话一定别忘了点 :sparkling_heart: 只关注不点 :sparkling_heart:的都是耍流氓 只收藏也不点 :sparkling_...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
一套基于vue3、element-plus、typescript4、vite3的后台集成方案
05-03
使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很...
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
元素加管理员 基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 ...$ cd element-plus-admin $ npm install pnpm -g $ pnpm install $ pnpm run serve
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue3 element-plus 使用icon图标组件
热门推荐
天马3798
03-02 1万+
一、vue3 element-plus 使用icon图标组件 目前 element-plus版本是2.0.4 当前版本的icon还没有默认在组件中，需要另外安装才能使用图标。 使用步骤： 1.安装@element-plus/icons-vue库 npm install @element-plus/icons-vue 2.全局引入icon组件 import { createApp } from 'vue' import App from './App.vue' import instal..
element-plus icon 的用法
everyStudy的博客
08-24 779
element-plus icon 的用法
element表单表头 放图标的方法
csstmg的博客
07-18 2565
<el-table-column class="more-oprate" fixed="right" width="100" label="操作"> <!-- label="操作" --> <template slot="header"> <span @click="operatorclick">操作<i class="el-icon-rank opicon" /></span> .
vue3 ElementPlus使用最简单的方法使用icon
weixin_45852687的博客
01-30 1188
最简单的方法在vue3项目中使用各种icon图标~
typescript+element-plus进度条动态传值
05-17
在 TypeScript 中使用 Element Plus 的进度条组件可以按照以下步骤进行： 1. 安装 Element Plus 和 TypeScript 的类型声明： ``` npm install element-plus --save npm install @types/element-plus --save-dev ``` 2. 在 Vue 组件中引入 Element Plus： ```typescript import { defineComponent } from 'vue' import { ElProgress } from 'element-plus' export default defineComponent({ components: { ElProgress }, setup() { return {} } }) ``` 3. 在模板中使用 ElProgress 组件，并通过 `:percentage` 属性传递进度值： ```typescript <template> <div> <el-progress :percentage="progress"></el-progress> <button @click="increaseProgress">增加进度</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import { ElProgress } from 'element-plus' export default defineComponent({ components: { ElProgress }, setup() { const progress = ref(0) const increaseProgress = () => { progress.value += 10 } return { progress, increaseProgress } } }) </script> ``` 在这个例子中，我们使用了 `ref` 创建响应式的 `progress` 变量，并将其赋值为 0。我们还定义了一个 `increaseProgress` 函数，每次调用时将 `progress` 变量的值增加 10。 在模板中，我们将 `progress` 变量的值通过 `:percentage` 属性传递给 ElProgress 组件，这样进度条就可以根据变量的值动态地更新显示。 注意，这个例子中的 `increaseProgress` 函数只是为了演示如何动态地更新进度条的值，实际使用时需要根据具体的业务逻辑来更新进度条的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值