ElementPlus 快速入门
目录
前言
为什么要学习 ElementPlus?
正文
步骤
1 创建 一个工程化的vue 项目
2 安装 element-Plus :Form 表单 | Element Plus
1 点击 当前界面的指南
2 点击左边菜单栏上的安装,选择包管理器
3 运行该命令
demo(案例1 )
步骤
1 在main.js 引入 element-plus
2 在src 文件夹下,自定义vue 文件
3 查看效果:看到 package.json ,点击调试
4 点击 URL ,看到浏览器
做法(修改部分按钮)
总之:
demo(案例2 )
总结
前言
为什么要学习 ElementPlus?
答:让我们前端界面更加美观
网址:Form 表单 | Element Plus
正文
步骤
1 创建 一个工程化的vue 项目
大致步骤,见 博客:初识Vue3(详细版:创建,启动vue 项目)-CSDN博客
vue 工程创建成功
2 安装 element-Plus :Form 表单 | Element Plus
步骤
1 点击 当前界面的指南
2 点击左边菜单栏上的安装,选择包管理器
- 复制 以下命令
npm install element-plus --save
3 运行该命令
注意:这里可以使用在黑窗口中运行,也可以在vscode 终端运行
这里我是在vocode 终端运行
1 打开 vocode 选择 文件---打开文件夹,找到下载好的vue 工程,导入
2 在终端运行该命令,等待 node_modules 出现 @element -plus
demo(案例1 )
目的:展示 element-plus 官网上 button 按钮上的案例
如图所示:
步骤
1 在main.js 引入 element-plus
在快速开始,点击 复制 完整引入代码
将复制好的代码,替换原本的main.js 代码
2 在src 文件夹下,自定义vue 文件
我这里是button.vue
打开element-plus 看到 组件
- 看到右下角 <> 这个图案,点击可以看到 这些按钮的源码
复制这些代码,粘贴到之前我们自定义的vue 文件
调整:将script 标签,放在最前头
做法:
1 在app.vue 中导入 自定义的vue 文件,同时为了更好的展示效果,我将之前的app.vue中的内容删掉
2 在script 标签中导入 button.vue ,和早template 标签中使用 自定义标签 buttonVue
app.vue 修改后的代码
<script setup>
import buttonVue from './button.vue'
</script><template><button-vue></button-vue>
</template>
3 查看效果:看到 package.json ,点击调试
4 点击 URL ,看到浏览器
如果这些组件,不符合你的要求,例如,我想要去除掉后两行
做法(修改部分按钮)
打开浏览器的检查,可以看到每一个div 都对应一行按钮
在 button.vue 除掉 后两行按钮表示的代码,刷新以下
总之:
就是通过浏览器检查,找到每一个按钮对应的代码,根据需要修改
仔细阅读 element-plus 官网
demo(案例2 )
目的:延续之前的 button.vite,修改第一行的Danger 按钮改为禁用状态
阅读 element-plus 官网,在前的button 按钮中,往下滑看到 Button API
发现 disabled表示按钮是否为禁用状态 ,默认是 flase
现在修改 disabled 的值为true ,让 该按钮无效
效果展示
会发现,你点这个按钮和点其他按钮是不一样的!
总结
本篇博客,学习了element-plus ,重点是 阅读 element-plus 官网,根据浏览官网上的内容,来实现自己的目的。
相关文章:
ElementPlus 快速入门
目录 前言 为什么要学习 ElementPlus? 正文 步骤 1 创建 一个工程化的vue 项目 2 安装 element-Plus :Form 表单 | Element Plus 1 点击 当前界面的指南 2 点击左边菜单栏上的安装,选择包管理器 3 运行该命令 demo(案例1 ) 步骤 …...
vue3 ts 请求封装后端接口
一 首页-广告区域-小程序 首页-广告区域-小程序 GET/home/banner1.1 请求封装 首页-广告区域 home.ts export const getHomeBannerApi (distributionSite 1) > {return http<BannerItem[]>({method: GET,url: /home/banner,data: {distributionSite,},}) }函数定…...
[ACTF2020 新生赛]BackupFile-3.23BUUCTF练习day5(1)
[ACTF2020 新生赛]BackupFile-3.23BUUCTF练习day5(1) 解题过程 打开题目环境 看题目意思应该是让我找备份文件 备份文件一般的后缀名为 .rar .zip .7z .tar.gz .bak .swp .txt .html .bak 直接扫描一下 在url中输入/index.php.bak 弱类型比较 为弱相等,即当…...
信创-人大金仓数据库创建
一. 官文 资源下载地址 https://download.kingbase.com.cn/xzzx/index.htm 下载安装文件 下载授权文件 产品文档地址:https://help.kingbase.com.cn/v8/index.html 二. 概念 2.1 体系结构 实例结构 :由数据库文件和 KingbaseES 实例组成。数据…...
【QT】QTCreator测试程序
使用QTCreator实现窗体,其中拟合程度图左侧是测点列表,右侧是改测点的拟合程度图(不使用UI,使用代码编写实现) 实现思路 创建主窗口:继承 QMainWindow 类来创建主窗口。布局管理:使用 QSplitt…...
Python入门基础
python基础类型转换 str()与int()类型转换 name 张三 age 20 print(type(name),type(age))print(我叫name 今年, str(age)岁 )a10 b198.8 cFalse print(type(a),type(b),type(c)) print(str(a),str(b),str(c))s1 128 f198.7 s276.77 ffTrue s3hello print(type(s…...
Debug-037-table列表勾选回显方案
效果展示: 图1 图2 最近实现一个支持勾选的el-table可以回显之前勾选项的功能。实现了一个“编辑”的功能: 在图1中的列表中有三行数据,当点击“更换设备”按钮时,打开抽屉显示el-table组件如图2所示,可以直接回显勾选…...
Zotero·Awesome GPT配置
使用API配置(稳定,氪金) 配置1-1 (方式1)在DeepSeek 开放平台获得API Key,输入Awesome GPT的api key中;base api选项选择deepseek;Temperature设置1,Related Number设置…...
在 Simulink 里构建输水隧洞充水过程模型的基本步骤与思路
下面为你介绍在 Simulink 里构建输水隧洞充水过程模型的基本步骤与思路,不过由于没办法直接生成 Simulink 模型文件,这里会给出一个模拟该过程的 Matlab 脚本代码示例。 建模思路 输水隧洞充水过程一般能够用一阶常微分方程来描述,其方程如…...
网络基础梳理
为什么要有网络呢? 在一开始科学家们都是自己在计算机当中做实验但是难免需要共同进行科研。假设现在一个业务需要三个人共同完成,那么现在就有问题了: 由于第一个人完成工作前,其他两人无法开始,这导致工作流程是串行…...
Android开发检查是否是各大厂商手机的工具类
Android开发检查是否是各大厂商手机的工具类 有时需要知道该手机是vivo,oppo,xiaomi,huawei等手机时,需要用到 public class RomUtils {private static final String TAG "Rom";public static final String ROM_MIUI "MIUI";public static …...
系统与网络安全------网络应用基础(2)
资料整理于网络资料、书本资料、AI,仅供个人学习参考。 交换机 认识交换机 交换机,Switch 用户将多台计算机/交换机连接在一起,组建网络 交换机负责为其中任意两台计算机提供独享线路进行通信 非网管型交换机 即插即用交换机 即插即用&…...
vue项目配置服务器代理,解决请求跨域问题
在 Vue 项目中配置代理服务器,以下是常见的两种方式: 1、基于vue-cil(webpack)框架项目 vue.config.js module.exports {devServer: {proxy: {/api: {target: http://xxxxxx.com, // 服务器地址changeOrigin: true,pathRewrit…...
【硬核实战】ETCD+AI智能调度深度整合!从架构设计到调优避坑,手把手教你打造高可用调度系统!
一、核心架构设计:ETCD如何赋能AI调度? 🔥 架构图: [AI调度引擎] ← 实时数据 → [ETCD集群] ↓ 决策指令 [执行层(车辆/物流/交通设备)] 核心角色: ETCD:存储调度策略、节点状…...
《软件安装与使用教程》— NVIDIA CUDA在Windows的安装教程
《软件安装与使用教程》— NVIDIA CUDA在Windows的安装教程 Installed: - Nsight Monitor Not Installed: - Nsight for Visual Studio 2019 Reason: VS2019 was not found - Nsight for Visual Studio 2017 Reason: VS2017 was not found - Integrated Graphics Frame Debugge…...
Spring的bean生命周期
Spring框架中的bean生命周期指的是在容器中一个bean从创建到销毁的整个过程。以下是Spring中bean的生命周期的主要阶段: 实例化Bean:容器根据bean的定义创建bean的实例。 设值注入:容器通过setter方法或字段直接注入bean的属性。 调用Bean的…...
java执行jar包提示没有主清单属性
以前都没遇到过这种情况,什么时候打jar, war包都没有遇到过, 按照网上说的创建了META-INF/MANIFEST.MF 还是报错 于是检查下maven 打包发现:竟然有skip 为true 去掉 skip true ,进行打包,编译后正常...
基于 FPGA的HLS技术与应用
1、hls简介 HLS ( high level synthesis )即高层次综合,主要是利用高级编程语言实现算法。 2、循环优化 约束语法: #pragma HLS unroll #pragma HLS PIPELINE II1 绝大多数循环都以串行的方式执行,这种执行方…...
[笔记] SpringBoot3 使用 EasyExcel 封装工具类实现复杂 Excel 数据处理:使用Java构建高效的数据导入解决方案
文章目录 一. 特殊 Excel 表格例子二. 使用示例1. bo 示例(部分字段)2. 自定义监听器3. 使用方法 三. 实现1. 工具类2. 默认基础导入(特殊 Excel 建立在这个基础上)2.1 Excel 导入监听2.2 默认监听2.3 Excel 返回对象2.3 默认excel返回对象实现 3. 特殊 Excel3.1 单元格位置类3…...
【数据库】sql错题详解
1. 执行子查询 SELECT 供应商号 FROM 订购单 WHERE 职工号 IN (E1, E3) GROUP BY 供应商号 HAVING COUNT(DISTINCT 职工号) 2筛选职工号为 E1 或 E3 的记录: 依据 WHERE 职工号 IN (E1, E3) 这个条件,从 订购单 表中把职工号为 E1 或者 E3 的记录筛选出…...
Three.js贴图技巧:优化性能与效果
引言 在当今数字化的时代,WebGL 技术为开发者们打开了一扇通往交互式 3D 图形世界的大门,而 Three.js 作为JavaScript库中的佼佼者,凭借其简单易用的 API 和丰富的功能,在创建3D场景和交互应用方面得到了广泛应用。在Three.js构建…...
Java Collection API增强功能系列之一 Arrays.asList()
在Java编程中,Arrays.asList() 是一个高频使用却又容易引发陷阱的工具方法。它能够快速将数组转换为列表,但其特殊行为常常让开发者踩坑。本文将深入剖析该方法的本质特性,并揭示其使用时的注意事项。一、方法定义与基础用法 1. 方法签名 p…...
websocket中spring注入失效
一个null指针引发的思考 websocket中spring注入失效 一个null指针引发的思考场景代码SpringBoot入口类配置类websocket类 问题排查问题1:问题2: 反思解决方案一:方案二:方案三:方案四: 场景 首页有个webso…...
Nat Commun:网络结构在塑造神经表征的强度中扮演着‘幕后推手’的角色
摘要 人类通过一系列离散事件构建他们对世界的心智模型。这一过程被称为图学习,它产生了一个编码事件间转移概率图的模型。近期的研究表明,一些网络比其他网络更容易学习,但这种效应的神经基础仍然未知。在这里,本研究使用功能磁共…...
Driver具体负责什么工作
在 Apache Spark 中,Driver(驱动程序) 是 Spark 应用的核心控制节点,负责协调整个应用的执行流程。它是用户编写的 Spark 应用程序(如 main() 方法)的入口点,直接决定了任务的调度、资源分配和结…...
LeetCode 热题 100----2.移动零
LeetCode 热题 100----2.移动零 题目描述 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。请注意 ,必须在不复制数组的情况下原地对数组进行操作。示例 1:输入: nums [0,1,0,3,12] 输出: [1,3,12,…...
能源革命新突破:虚拟电厂赋能微电网智能调控,构建低碳生态新格局
在“双碳”目标的引领下,中央一号文件明确提出了“推进农村能源革命,深化绿色低碳技术应用”。作为能耗集中区域,产业园区如何实现清洁能源高效消纳与碳减排的目标成为了难题,中电国为推出的虚拟电厂与风光储充柴多能互补的微电网…...
Java集合框架深度剖析:从数据结构到实战应用
引言 Java集合框架是Java开发中的核心组件之一,其设计目标是提供高性能、高复用性的数据容器。无论是数据处理、缓存设计还是高并发场景,集合框架都扮演着关键角色。本文将从List、Map、Set三大核心接口出发,深入剖析其主流实现类࿰…...
基于灵动微单片机SPIN系列的两轮车解决方案
电动车需配备与电机兼容性更高的双模控制器。灵动针对两轮车提供了相应的方案和解决算法。在两轮车的霍尔传感器出现故障时,系统应能继续有效地驱动电机。除了常规的过流、过压、过温保护措施外,灵动的方案还支持防盗功能,具备电刹车能力&…...
ngx_http_core_server_name
定义在 src\http\ngx_http_core_module.c static char * ngx_http_core_server_name(ngx_conf_t *cf, ngx_command_t *cmd, void *conf) {ngx_http_core_srv_conf_t *cscf conf;u_char ch;ngx_str_t *value;ngx_uint_t i;ngx_…...
【Docker系列一】Docker 简介
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
[C++面试] 你了解transform吗?
层级核心知识点入门基本语法、与for_each对比、单/双范围操作进阶动态扩展、原地转换、类型兼容性、异常安全高阶性能优化、C20 Ranges、transform_if模拟 一、入门 1、描述std::transform的基本功能,并写出两种版本的函数原型 std::transform函数是 C 标准库<…...
MSE分类时梯度消失的问题详解和交叉熵损失的梯度推导
下面是MSE不适合分类任务的解释,包含梯度推导。以及交叉熵的梯度推导。 前文请移步笔者的另一篇博客:大模型训练为什么选择交叉熵损失(Cross-Entropy Loss):均方误差(MSE)和交叉熵损失的深入对比…...
docker 安装部署 canal
1 mysql 安装 1.1 拉取镜像 docker pull mysql:8.4.41.2 创建挂载目录 mkdir -p /user/lzl/tool/docker/mysql/mysql_8.4.4/home/confmkdir -p /user/lzl/tool/docker/mysql/mysql_8.4.4/home/datamkdir -p /user/lzl/tool/docker/mysql/mysql_8.4.4/home/log1.3 编辑配置文…...
flowable适配达梦7 (2.1)
经过第一版的问题解决,后端项目可以启动,前端页面也集成进去。 前端在流程设计页面报错 之后发现主要是组件中modelerStore这个值没有 解决方法:在data增加对象 给component/process/designer.vue 中涉及到的每个子组件传入 :modelerStore“modeler…...
优化 Docker 镜像 技巧
优化 Docker 镜像可以提高构建速度、减少镜像大小、提高安全性和效率。以下是一些优化 Docker 镜像的方法: 使用适当的基础镜像 选择合适的基础镜像可以减小镜像大小,并确保基础镜像的安全性和更新性。Alpine、Ubuntu Minimal 等轻量级基础镜像是常用选…...
Spring Boot框架中常用注解
以下是Spring Boot框架中常用注解的详细说明,包括名称、用途、用法、使用位置及扩展示例,按功能模块分类整理: 一、核心启动与配置注解 1. SpringBootApplication 用途:主启动类注解,整合了 Configuration、EnableAu…...
Linux笔记之Ubuntu22.04安装IBus中文输入法教程
Linux笔记之Ubuntu22.04安装IBus中文输入法教程 code review! 文章目录 Linux笔记之Ubuntu22.04安装IBus中文输入法教程安装 IBus 并配置中文输入法步骤 1: 安装 IBus 和拼音插件步骤 2: 设置 IBus 为默认输入法框架步骤 3: 重启会话步骤 4: 添加中文输入法步骤 5: …...
(UI自动化测试web端)第二篇:元素定位的方法_xpath属性定位
看代码里的【driver.find_element_by_xpath( )】()里的路径怎么写? xpath元素定位有多种写法,那我们现在说的就是在元素定位时,根据网页的实际情况来选择适合的xpath元素定位的写法。 文章主要介绍了xpath属性定位的方法和属性扩展使用的方法…...
Linux中执行 ifconfig 命令时提示 “未找到命令”
在 Linux 系统里,若执行 ifconfig 命令时提示 “未找到命令” 通常是由于系统没有安装 net-tools 包,或者该命令不在系统的 PATH 环境变量所包含的路径中 安装 net-tools 包 # Ubuntu/Debian sudo apt update sudo apt install net-tools# CentOS 7 及以…...
UE4学习笔记 FPS游戏制作15修正可以换枪中可以继续换枪和开火的Bug
现在存在的问题是换枪动作没完成时,可以继续换枪或者开枪 因为换枪这个动作是由玩家进行的,所以应该修改FppShooter脚本 我们添加两个参数 最后一次换枪的时间和换枪动画的长度 EquipmentLength 设置默认值0.6秒 添加一个新函数IsInEquip,返…...
SSL/TLS 和 SSH 介绍以及他们的区别
目录 SSL/TLS SSL/TLS工作原理的核心步骤握手阶段(Handshake Protocol)加密通信阶段(Encrypted Communication Phase)会话恢复(Session Resumption) SSH SSH 加密机制的核心步骤 SSH 和 SSL 区别 SSL/TLS …...
AudioTrack
AudioTrack是Android Audio系统提供给应用开发者(java/C)的API,用于操作音频播放的数据通路。MeidaPlayer在播放音乐时用到的是它,我们可以也可以直接使用AudioTrack进行音频播放。它是最基本的音频数据输出类。 AudioTrack.java…...
Windows安装Rust环境(详细教程)
一、 安装mingw64(C语言环境) Rust默认使用的C语言依赖Visual Studio,但该工具占用空间大安装也较为麻烦,可以选用轻便的mingw64包。 1.1 安装地址 (1) 下载地址1-GitHub:Releases niXman/mingw-builds-binaries GitHub (2) 下载地址2-W…...
监控IP,网站将异常情况通过飞书机器人发至指定群内
界面如下,丑是丑了点,但主打一个实用。 主要就是通过ping,就是一直在ping,当不通的时候,就根据你设置的报警时间,主要是利用飞书机器人来给飞书指定群里发异常信息报警。 直接上代码 import subprocess i…...
JVM 02
今天是2025/03/23 19:07 day 10 总路线请移步主页Java大纲相关文章 今天进行JVM 3,4 个模块的归纳 首先是JVM的相关内容概括的思维导图 3. 类加载机制 加载过程 加载(Loading) 通过类全限定名获取类的二进制字节流(如从JAR包、网络、动态…...
局域网设备访问虚拟机 挂载NFS
目录 引言:网络IP问题配置虚拟机网络有线网络:无线网络: NFS文件挂载服务端配置客户端连接 引言: 需求:局域网下树莓派设备想要访问电脑主机上的虚拟机。这样可以通过nfs挂载网络设备,有利于交叉编译环境调…...
零、ubuntu20.04 安装 anaconda
1.anaconda下载 地址:Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 选择:Anaconda3-2023.07-2-Linux-x86_64.sh 2.anaconda安装 选择下载目录,选在在终端中打开,然后在终端输入安装命…...
IntelliJ IDEA 将 Spring Boot 项目远程部署到服务器
使用 IntelliJ IDEA 将 Spring Boot 项目远程部署到服务器的详细步骤,涵盖多种常见方法: 方法一:通过 SSH Maven 插件直接部署 1. 服务器环境准备 确保服务器已安装: Java 运行环境(与项目 JDK 版本一致࿰…...
利用dify打造命令行助手
利用dify打造命令行助手 前言 我是mac os 的使用者。 如果说macos哪个工具我使用最频繁,最能提高效率的工作工具非zsh莫属(当然,我安装了iterm)。前不久,我要扩容线上的k8s集群。便想统计一下每个node上运行的pod数量。我不知道合适的命令&…...