当前位置: 首页 > news >正文

使用Element Plus

1. 官网安装

安装 | Element Plus (gitee.io)

安装:

npm install element-plus --save

在main.ts中全局注册ElementPlus并使用

//加入element-plus
import ElementPlus from 'element-plus';
//加入element-plus样式
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

2. 全局安装图标

例如我们使用官方案例中的带小星星的图标,不显示图标,由于Element Plus是图标样式分离的,我们如要使用需要全局安装图标

全局安装图标 

npm install @element-plus/icons-vue

将其类型声明提供给 TypeScript 

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app=createApp(App)
//全局导入饿了么图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}

3.使用

例如:要在Home页面中使用,就在Home 页面中导入样式,在那个页面使用就在那个页面导入

相关文章:

使用Element Plus

1. 官网安装 安装 | Element Plus (gitee.io) 安装: npm install element-plus --save 在main.ts中全局注册ElementPlus并使用 //加入element-plus import ElementPlus from element-plus; //加入element-plus样式 import element-plus/dist/index.css; import…...

单例(Singleton)设计模式总结

1. 设计模式概述: 设计模式是在大量的实践中总结和理论化之后优选的代码结构、编程风格、以及解决问题的思考方式。设计模式免去我们自己再思考和摸索。 就像是经典的棋谱,不同的棋局,我们用不同的棋谱。"套路"经典的设计模式一共有…...

LeetCode每日一题之专题一:双指针 ——快乐数

快乐数OJ链接:202. 快乐数 - 力扣(LeetCode) 题目: 题目分析: 为了房便叙述,将「对于⼀个正整数,每⼀次将该数替换为它每个位置上的数字的平方和」这⼀个 操作记为 x 操作; 题目告诉我们&#…...

Docker Desktop 不支持 host 网络模式

先把这个结论的放在前面,直接访问链接就能看到官方文档中已经明确说了不支持。 参考链接:docker desktop for windows 不支持 host 网络模式 以前对于 docker 的网络模式,一直只是了解,没有亲自尝试过。结果今天在尝试 docker 的 …...

Linux网络编程二(TCP图解三次握手及四次挥手、TCP滑动窗口、MSS、TCP状态转换、多进程/多线程服务器实现)

文章目录 1、TCP三次握手(1) 第一次握手(2) 第二次握手(3) 第三次握手 2、TCP四次挥手(1) 一次挥手(2) 二次挥手(3) 三次挥手(4) 四次挥手 3、TCP滑动窗口4、TCP状态时序图5、多进程并发服务器6、多线程并发服务器 1、TCP三次握手 TCP三次握手(TCP three-way handshake)是TCP协…...

【云原生篇】K8S之Job 和 CronJob

在 Kubernetes (K8s) 中,Job 和 CronJob 是两种管理批处理任务的资源对象,它们用于控制短暂的一次性任务(Job)或定时执行的周期性任务(CronJob)。 Job 概念 Job 负责运行一个或多个 Pod,并确…...

PHP8.3-ZTS版本安装流程以及添加扩展

下载php-8.3.x.tar.gz至服务器并解压 [rootapisix-test php-8.3.4]# wget https://www.php.net/distributions/php-8.3.4.tar.gz进入目录执行编译命令,必须要带 --enable-zts 才能激活zts功能 [rootapisix-test php-8.3.4]# ./configure --prefix/usr/local/p…...

RabbitMQ系统监控、问题排查和性能优化实践

一、系统监控:RabbitMQ的各项性能指标及监控 Message Rates:消息率包含了publish,deliver/get,ack等方面的数据,反映了消息在系统中流转的情况。Queue Length:队列长度反映了系统当前的负载情况。如果队列…...

【华为OD机试】根据IP查找城市(贪心算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…...

css:阴影效果box-shadow

属性 box-shadow 属性值由四个参数组成: 水平偏移量:表示阴影相对于元素的水平位置。垂直偏移量:表示阴影相对于元素的垂直位置。模糊度:表示阴影的模糊程度。颜色:表示阴影的颜色 示例 单个box-shadow 0px -2px 6p…...

Scala第十九章节(Actor的相关概述、Actor发送和接收消息以及WordCount案例)

Scala第十九章节 章节目标 了解Actor的相关概述掌握Actor发送和接收消息掌握WordCount案例 1. Actor介绍 Scala中的Actor并发编程模型可以用来开发比Java线程效率更高的并发程序。我们学习Scala Actor的目的主要是为后续学习Akka做准备。 1.1 Java并发编程的问题 在Java并…...

蓝桥杯杯赛之深度优先搜索优化《1.分成互质组》 《 2.小猫爬山》【dfs】【深度搜索剪枝优化】【搜索顺序】

文章目录 思想例题1. 分成互质组题目链接题目描述【解法一】【解法二】 2. 小猫爬山题目链接题目描述输入样例:输出样例:【思路】【WA代码】【AC代码】 思想 本质为两种搜索顺序: 枚举当前元素可以放入哪一组枚举每一组可以放入哪些元素 操…...

软件设计原则:依赖倒置

定义 依赖倒置原则(Dependency Inversion Principle, DIP)是面向对象设计原则之一,其核心是高层模块(如业务逻辑)不应当依赖于低层模块(如具体的数据访问或设备控制实现),而是双方都…...

03-自媒体文章发布

自媒体文章发布 1)自媒体前后端搭建 1.1)后台搭建 ①:资料中找到heima-leadnews-wemedia.zip解压 拷贝到heima-leadnews-service工程下,并指定子模块 执行leadnews-wemedia.sql脚本 添加对应的nacos配置 spring:datasource:driver-class-name: com…...

Oracle中实现一次插入多条数据

一、需求描述 在我们实际的业务场景中,由于单条插入的效率很低(每次都需要数据库资源连接关闭的开销),故需要实现一次性插入多条数据,用以提升数据插入的效率; 如下图是常见的单条插入数据: 二…...

【C++入门】关键字、命名空间以及输入输出

💞💞 前言 hello hello~ ,这里是大耳朵土土垚~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#x…...

初识MySQL(中篇)

使用语言 MySQL 使用工具 Navicat Premium 16 代码能力快速提升小方法,看完代码自己敲一遍,十分有用 目录 1.SQL语言 1.1 SQL语言组成部分 2.MySQL数据类型 2.1 数值类型 2.2 字符串类型 2.3 日期类型 3.创建数据表 3.1 创建数据表方法1 …...

前端订阅后端推送WebSocket定时任务

0.需求 后端定时向前端看板推送数据,每10秒或者30秒推送一次。 1.前言知识 HTTP协议是一个应用层协议,它的特点是无状态、无连接和单向的。在HTTP协议中,客户端发起请求,服务器则对请求进行响应。这种请求-响应的模式意味着服务器…...

提高机器人系统稳定性:引入阻尼作为共振后的相位超前

在机器人关节中,引入阻尼作为共振后的相位超前,确实是一种提高系统稳定性的有效策略。机器人关节的振动和共振是影响其性能稳定性的关键因素,特别是在进行高速、高精度操作时。阻尼的引入能够显著减少这些不利因素,提升机器人的整…...

深度学习理论基础(三)封装数据集及手写数字识别

目录 前期准备一、制作数据集1. excel表格数据2. 代码 二、手写数字识别1. 下载数据集2. 搭建模型3. 训练网络4. 测试网络5. 保存训练模型6. 导入已经训练好的模型文件7. 完整代码 前期准备 必须使用 3 个 PyTorch 内置的实用工具(utils): ⚫…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...