Element-ui的使用教程 基于HBuilder X
文章目录
- 1.Element-ui简介
- 2.使用HBuilderX 创建一个基于Vue3的项目 (由于是使用的基于Vue3的Element-ui)
- 3.安装element-ui
- 4.在项目里完全引用element-ui
- 5.引用组件
- 6.运行项目
1.Element-ui简介
Element,一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库
element-ui官网地址
https://element-plus.org/zh-CN/guide/installation.html
2.使用HBuilderX 创建一个基于Vue3的项目 (由于是使用的基于Vue3的Element-ui)
HBuilderX 安装 自行百度
3.安装element-ui
在HBuilderX 打开控制台界面 输入如下命令 执行安装
npm install element-plus --save
4.在项目里完全引用element-ui
修改main.js文件添加如下代码
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
5.引用组件
这里以button 按钮为例
标签是
<div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div>
修改App.vue文件 添加一组按钮到页面上
<template><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3 + Vite" /><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div>
</template>
6.运行项目
npm run dev
结果如图所示

相关文章:
Element-ui的使用教程 基于HBuilder X
文章目录 1.Element-ui简介2.使用HBuilderX 创建一个基于Vue3的项目 (由于是使用的基于Vue3的Element-ui)3.安装element-ui4.在项目里完全引用element-ui5.引用组件6.运行项目 1.Element-ui简介 Element,一套为开发者、设计师和产品经理准备…...
Chapter 03 复合数据类型-1
1.列表 Python内置的一种有序、可变的序列数据类型; 列表的定义: [ ]括起来的逗号分隔的多个元素组成的序列 列表对象的创建: (1)直接赋值 >>> list1 []#创建一个空列表赋值给list1 >>> list…...
【Python知识】Python面向对象编程知识
Python面向对象编程知识 概述1. 类(Class)2. 对象(Object)3. 封装(Encapsulation)4. 继承(Inheritance)5. 多态(Polymorphism)6. 抽象(Abstractio…...
CSharp: Oracle Stored Procedure query table
存储过程查询postgreSQL,Oracle 和sql server,Mysql 有区别。程序调用也是有区别。 oracle sql script: CREATE OR REPLACE PROCEDURE procSelectSchool(paramSchoolId IN char,p_cursor OUT SYS_REFCURSOR ) AS BEGINOPEN p_cursor FORSELECT *FROM SchoolWHERE SchoolId p…...
“协同过滤技术实战”:网上书城系统的设计与实现
2.1 JSP技术介绍 Java Server Pages这三个英文词汇的首字母的组合就是JSP。所以JSP是一个简写的名字,代表动态网页开发技术。JSP与Java的关系可以使用公式表示,即:JSP HTMLJava,HTML就是编写静态内容的标记语言。JSP则是可以编写网…...
Dhatim FastExcel 读写 Excel 文件
Dhatim FastExcel 读写 Excel 文件 一、说明1、主要特点2、应用场景 二、使用方法1、引入依赖2、Sheet 数据3、读取 Excel4、写入 Excel 一、说明 Github 地址:Dhatim FastExcel Dhatim FastExcel是一个高性能、轻量级的Java库,专门用于读取和写入Exce…...
YOLO11全解析:从原理到实战,全流程体验下一代目标检测
前言 一、模型介绍 二、网络结构 1.主干网络(Backbone) 2.颈部网络(Neck) 3.头部网络(Head) 三、算法改进 1.增强的特征提取 2.优化的效率和速度 3.更高的准确性与更少的参数 4.环境适应性强 5.…...
深度学习领域的主要神经网络架构综述
阅读本文前请先按照顺序阅读: Coursera吴恩达《神经网络与深度学习》课程笔记(1)-- 深度学习概述_吴恩达深度学习课程-CSDN博客 https://blog.csdn.net/red_stone1/article/details/77799014 完结篇 | 吴恩达deeplearning.ai专项课程精炼笔…...
【Nginx系列】---Nginx配置tcp转发
参考 Nginx 配置文件: error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid;events {worker_connections 1024; }stream {# 第一个服务转发upstream mysqltest {server 172.16.187.142:9000;}server {listen 9000;proxy_pass mysqltest;}…...
Java抽象工厂+单例模式
在前端时间开发过程中,有这样一个业务场景:A;B两家厂商设备进行设备信息的同步功能。 根据实际场景,做了抽象工厂+单例模式实现调用工厂时,生成不同的具体业务引用对象,实现方法的调用。 概念: 抽象工厂模式通过接口或抽象类来创建一系列相关或依赖对象。它定义了一组工…...
后端接口设计
一、基本规范 1.URL设计 应遵循RESTful风格,使用动词名词的方式描述接口的功能。应简洁明了,易于理解和记忆。 2.请求协议及方法 使用HTTPS协议进行数据传输,保证数据在传输过程中的安全性。如无特殊情况,统一使用post方法。 …...
Docker部署Sentinel
一、简介 是什么:面向分布式、多语言异构化服务架构的流量治理组件 能干嘛:从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性 官网地址:https://sentinelguard.io/zh-c…...
真实环境下实车运行,新能源汽车锂离子电池数据集
引言 锂离子电池(Lithium-ion Batteries,LiBs)已经作为电动汽车核心动力源,其性能直接关系到系统的性能和使用安全。为确保锂电池的安全使用,需要对锂电池的状态进行精确的估计,包括荷电状态(State of Charge, soC)、健康状态(St…...
【求职面试】驾照的种类
大型客车 A1 大型载客汽车 A3、B1、B2、C1、C2、C3、C4、M 牵引车 A2 重型、中型全挂、半挂汽车列车 B1、B2、C1、C2、C3、C4、M 城市公交车 A3 核载10人以上的城市公共汽车 C1、C2、C3、C4 中型客车 B1 中型载客汽车(10人以上、19人以下) C1、C2、C3…...
centos权限大集合,覆盖多种权限类型,解惑权限后有“. + t s”问题!
在 CentOS 系统中,权限管理是操作系统的核心功能之一,确保不同用户和进程对文件、目录以及设备的访问被合理控制。 权限系统主要包括传统的 Unix 权限模型、特殊权限(SetUID、SetGID、Sticky 位)和更精细的访问控制列表ÿ…...
AI Agent案例全解析:百度营销智能体(8/30)
引言:在当今这个科技飞速发展的时代,AI技术呈现出爆发式的增长,正以前所未有的态势改变着众多行业的发展轨迹,营销领域也不例外。随着市场竞争的日益激烈,传统营销模式逐渐显露出疲态,对于变革的需求愈发迫…...
hive常用函数有哪些
Hive是一个基于Hadoop的数据仓库工具,它提供了类似于SQL的接口,用于数据查询和分析。Hive提供了许多内置函数,这些函数可以分为几种类型,包括: • 字符串函数:用于处理字符串数据。 • concat()࿱…...
【Python高级353】python实现多线程版本的TCP服务器
前面学了了套接字编程、tcp服务端客户端开发、面向对象版的服务端客户端、带有端口复用的服务端。 这里使用多线程开发多任务版的服务端 多任务版本的TCP服务器 来一个客户,就为其创建一个线程 import socket import threadingclass WebServer:# 3、定义一个__ini…...
分布式调度框架学习笔记
一、分布式调度框架的基本设计 二、线程池线程数量设置的基本逻辑 cpu是分时复用的方法,线程是cpu调度的最小单元 如果当前cpu核数是n,计算密集型线程数一般设为n,io密集型(包括磁盘io和网络io)线程数一般设置为2n. 计算密集型线程数一般设…...
SpringCloudAlibaba技术栈-Nacos
1、什么是Nacos? Nacos是个服务中心,就是你项目每个功能模块都会有个名字,比如支付模块,我们先给这个模块起个名字就叫paymentService,然后将这个名字和这个模块的配置放到Nacos中,其他模块也是这样的。好处是这样能更好地管理项…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
