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中,其他模块也是这样的。好处是这样能更好地管理项…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
