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

Element-ui的使用教程 基于HBuilder X

news 2026/2/10 22:24:09

文章目录

      • 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的项目 &#xff08;由于是使用的基于Vue3的Element-ui&#xff09;3.安装element-ui4.在项目里完全引用element-ui5.引用组件6.运行项目 1.Element-ui简介 Element&#xff0c;一套为开发者、设计师和产品经理准备…...

编程日记 2024/12/27 3:16:10

Chapter 03 复合数据类型-1

1.列表 Python内置的一种有序、可变的序列数据类型&#xff1b; 列表的定义&#xff1a; [ ]括起来的逗号分隔的多个元素组成的序列 列表对象的创建&#xff1a; &#xff08;1&#xff09;直接赋值 >>> list1 []#创建一个空列表赋值给list1 >>> list…...

编程日记 2024/12/27 3:13:07

【Python知识】Python面向对象编程知识

Python面向对象编程知识 概述1. 类&#xff08;Class&#xff09;2. 对象&#xff08;Object&#xff09;3. 封装&#xff08;Encapsulation&#xff09;4. 继承&#xff08;Inheritance&#xff09;5. 多态&#xff08;Polymorphism&#xff09;6. 抽象&#xff08;Abstractio…...

编程日记 2024/12/27 3:09:03

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…...

编程日记 2024/12/27 3:05:00

“协同过滤技术实战”：网上书城系统的设计与实现

2.1 JSP技术介绍 Java Server Pages这三个英文词汇的首字母的组合就是JSP。所以JSP是一个简写的名字&#xff0c;代表动态网页开发技术。JSP与Java的关系可以使用公式表示&#xff0c;即&#xff1a;JSP HTMLJava&#xff0c;HTML就是编写静态内容的标记语言。JSP则是可以编写网…...

编程日记 2024/12/27 3:03:59

Dhatim FastExcel 读写 Excel 文件

Dhatim FastExcel 读写 Excel 文件 一、说明1、主要特点2、应用场景 二、使用方法1、引入依赖2、Sheet 数据3、读取 Excel4、写入 Excel 一、说明 Github 地址&#xff1a;Dhatim FastExcel Dhatim FastExcel是一个高性能、轻量级的Java库&#xff0c;专门用于读取和写入Exce…...

编程日记 2024/12/27 2:57:49

YOLO11全解析：从原理到实战，全流程体验下一代目标检测

前言 一、模型介绍 二、网络结构 1.主干网络&#xff08;Backbone&#xff09; 2.颈部网络&#xff08;Neck&#xff09; 3.头部网络&#xff08;Head&#xff09; 三、算法改进 1.增强的特征提取 2.优化的效率和速度 3.更高的准确性与更少的参数 4.环境适应性强 5.…...

编程日记 2024/12/27 2:51:43

深度学习领域的主要神经网络架构综述

阅读本文前请先按照顺序阅读&#xff1a; Coursera吴恩达《神经网络与深度学习》课程笔记&#xff08;1&#xff09;-- 深度学习概述_吴恩达深度学习课程-CSDN博客 https://blog.csdn.net/red_stone1/article/details/77799014 完结篇 | 吴恩达deeplearning.ai专项课程精炼笔…...

编程日记 2024/12/27 2:49:41

【Nginx系列】---Nginx配置tcp转发

参考 Nginx 配置文件&#xff1a; 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;}…...

编程日记 2024/12/27 2:48:40

Java抽象工厂+单例模式

在前端时间开发过程中，有这样一个业务场景：A;B两家厂商设备进行设备信息的同步功能。 根据实际场景，做了抽象工厂+单例模式实现调用工厂时，生成不同的具体业务引用对象，实现方法的调用。 概念： 抽象工厂模式通过接口或抽象类来创建一系列相关或依赖对象。它定义了一组工…...

编程日记 2024/12/27 2:47:39

后端接口设计

一、基本规范 1.URL设计 应遵循RESTful风格&#xff0c;使用动词名词的方式描述接口的功能。应简洁明了&#xff0c;易于理解和记忆。 2.请求协议及方法 使用HTTPS协议进行数据传输&#xff0c;保证数据在传输过程中的安全性。如无特殊情况&#xff0c;统一使用post方法。 …...

编程日记 2024/12/27 2:40:32

Docker部署Sentinel

一、简介 是什么&#xff1a;面向分布式、多语言异构化服务架构的流量治理组件 能干嘛&#xff1a;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性 官网地址&#xff1a;https://sentinelguard.io/zh-c…...

编程日记 2024/12/27 2:34:27

真实环境下实车运行，新能源汽车锂离子电池数据集

引言 锂离子电池(Lithium-ion Batteries,LiBs&#xff09;已经作为电动汽车核心动力源&#xff0c;其性能直接关系到系统的性能和使用安全。为确保锂电池的安全使用&#xff0c;需要对锂电池的状态进行精确的估计&#xff0c;包括荷电状态(State of Charge, soC)、健康状态(St…...

编程日记 2024/12/27 2:33:26

【求职面试】驾照的种类

大型客车 A1 大型载客汽车 A3、B1、B2、C1、C2、C3、C4、M 牵引车 A2 重型、中型全挂、半挂汽车列车 B1、B2、C1、C2、C3、C4、M 城市公交车 A3 核载10人以上的城市公共汽车 C1、C2、C3、C4 中型客车 B1 中型载客汽车&#xff08;10人以上、19人以下&#xff09; C1、C2、C3…...

编程日记 2024/12/27 2:29:21

centos权限大集合，覆盖多种权限类型，解惑权限后有“. + t s”问题！

在 CentOS 系统中&#xff0c;权限管理是操作系统的核心功能之一&#xff0c;确保不同用户和进程对文件、目录以及设备的访问被合理控制。 权限系统主要包括传统的 Unix 权限模型、特殊权限&#xff08;SetUID、SetGID、Sticky 位&#xff09;和更精细的访问控制列表&#xff…...

编程日记 2024/12/27 2:22:14

AI Agent案例全解析：百度营销智能体（8/30）

引言&#xff1a;在当今这个科技飞速发展的时代&#xff0c;AI技术呈现出爆发式的增长&#xff0c;正以前所未有的态势改变着众多行业的发展轨迹&#xff0c;营销领域也不例外。随着市场竞争的日益激烈&#xff0c;传统营销模式逐渐显露出疲态&#xff0c;对于变革的需求愈发迫…...

编程日记 2024/12/27 2:21:13

hive常用函数有哪些

Hive是一个基于Hadoop的数据仓库工具&#xff0c;它提供了类似于SQL的接口&#xff0c;用于数据查询和分析。Hive提供了许多内置函数&#xff0c;这些函数可以分为几种类型&#xff0c;包括&#xff1a; • 字符串函数&#xff1a;用于处理字符串数据。 • concat()&#xff1…...

编程日记 2024/12/27 2:16:06

【Python高级353】python实现多线程版本的TCP服务器

前面学了了套接字编程、tcp服务端客户端开发、面向对象版的服务端客户端、带有端口复用的服务端。 这里使用多线程开发多任务版的服务端 多任务版本的TCP服务器 来一个客户&#xff0c;就为其创建一个线程 import socket import threadingclass WebServer:# 3、定义一个__ini…...

编程日记 2024/12/27 2:14:04

分布式调度框架学习笔记

一、分布式调度框架的基本设计 二、线程池线程数量设置的基本逻辑 cpu是分时复用的方法&#xff0c;线程是cpu调度的最小单元 如果当前cpu核数是n&#xff0c;计算密集型线程数一般设为n&#xff0c;io密集型(包括磁盘io和网络io)线程数一般设置为2n. 计算密集型线程数一般设…...

编程日记 2024/12/27 2:13:03

SpringCloudAlibaba技术栈-Nacos

1、什么是Nacos&#xff1f; Nacos是个服务中心&#xff0c;就是你项目每个功能模块都会有个名字&#xff0c;比如支付模块,我们先给这个模块起个名字就叫paymentService,然后将这个名字和这个模块的配置放到Nacos中&#xff0c;其他模块也是这样的。好处是这样能更好地管理项…...

编程日记 2024/12/27 2:12:02

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/2/2 9:25:26

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41