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

Element-快速入门

什么是 Element

        在现代前端开发中,组件化的思想日益盛行,Element组件库作为一款流行的UI组件库,特别适用于基于Vue.js的项目,它为开发者提供了丰富的组件和良好的开发体验。

 想要使用Element的组件库,我们需要完成下面三步……

 安装Element组件库

        Element 组件库有多个版本,主要对应不同的 Vue 版本。Element UI(通常称为 Element)是基于 Vue 2.x 开发的,而 Element Plus 则是为 Vue 3.x 设计的。这意味着如果您使用的是 Vue 3,则需要选择 Element Plus,而非传统的 Element UI。

        根据自己安装的vue版本安装对应的组件库……我们下载的Element组件库会自动存放到我们Vue项目的 node_modules目录下

npm install element-plus

在项目中引入 Element Plus

        很多人会觉得我也不会引入啊,不知道命令啊,没关系,我也不知道,那么多命令谁记得住,我们直接去官网查看参考手册,复制命令就行……

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)这里有很多精美的图标按钮,这是vue3版本呢对应的 Element plus 组件库;

如果你是 2版本,则需要去这个Element - 网站快速成型工具找自己需要的组件代码

打开main.js 文件,复制导入包的命令

注意这里图片展示 的是2 版本的对应的引入方法

        由于我的是vue3版本,所以我下载的是与之对应的Element plus 版本,所以下面的引入方法稍有差异,如果是2版本的话可以根据官方文档操作

 

定义Element Plus 组件文件

首先我们需要自己定义一个.vue 的文件来存放我们需要的组件样例,我们以plus中的按钮为例……

复制它的按钮代码,存放在我们定义的ElementView.vue 文件中,如下:

在这个ElementView.vue 文件中,我们需要定义三对标签

<template> </template> 用来存放html 结构标签

<script></script> 存放js代码

<style><style>存放css代码

<template><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><div class="mb-4"><el-button plain>Plain</el-button><el-button type="primary" plain>Primary</el-button><el-button type="success" plain>Success</el-button><el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button></div><div class="mb-4"><el-button round>Round</el-button><el-button type="primary" round>Primary</el-button><el-button type="success" round>Success</el-button><el-button type="info" round>Info</el-button><el-button type="warning" round>Warning</el-button><el-button type="danger" round>Danger</el-button></div><div><el-button :icon="Search" circle /><el-button type="primary" :icon="Edit" circle /><el-button type="success" :icon="Check" circle /><el-button type="info" :icon="Message" circle /><el-button type="warning" :icon="Star" circle /><el-button type="danger" :icon="Delete" circle /></div>
</template><script lang="ts" setup>
import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue';
</script><style>
/* 这里可以添加样式 */
</style>

修改App.vue

        我们需要在App.vue 文件中引入 Element.vue ,来进行展示页面,清除原有的所有标签,给App.vue 也保留这三个标签,

<template><div><element-view></element-view></div>
</template><script setup lang="ts">
import ElementView from './views/ElementView.vue'; 
</script><style></style>

 总结

        Element组件库作为一款优秀的UI库,不仅丰富了Vue开发者的组件选择,它的易用性和性能优势使得在开发过程中得心应手。无论是前端新手还是经验丰富的开发者,都能从中受益。

相关文章:

Element-快速入门

什么是 Element 在现代前端开发中&#xff0c;组件化的思想日益盛行&#xff0c;Element组件库作为一款流行的UI组件库&#xff0c;特别适用于基于Vue.js的项目&#xff0c;它为开发者提供了丰富的组件和良好的开发体验。 想要使用Element的组件库&#xff0c;我们需要完成下面…...

利士策分享,从“亮剑精神”汲取财富智慧

利士策分享&#xff0c;从“亮剑精神”汲取财富智慧 在某一广袤区域内&#xff0c;一场寓意深远的活动正如火如荼地展开&#xff0c;它不仅象征着直面挑战的勇气&#xff0c;更隐含着经济社会发展的深层启示。 对于广大民众来说&#xff0c;这场活动背后所传达的理念与机遇&am…...

【JavaScript】关于使用JS对word文档实现预览的一些思考

文章目录 mammothdocx4js mammoth 官网地址&#xff1a;https://github.com/mwilliamson/mammoth.js#readme 安装mammoth&#xff1a; npm i mammoth -S我们可以安装mammoth来实现上传的word文件的在线预览&#xff0c;我们以element的上传组件为示例&#xff1a; <temp…...

安宝特方案 | AR技术在轨交行业的应用优势

随着轨道交通行业不断向智能化和数字化转型&#xff0c;传统巡检方式的局限性日益凸显。而安宝特AR眼镜以其独特的佩戴方式和轻便设计&#xff0c;为轨道交通巡检领域注入了创新活力&#xff0c;提供了全新的解决方案。 01 多样化佩戴方法&#xff0c;完美适应户外环境 安宝特…...

K8S配置MySQL主从自动水平扩展

前提环境 操作系统Ubuntu 22.04 K8S 1.28.2集群&#xff08;1个master2个node&#xff09; MySQL 5.7.44部署在K8S的主从集群 metrics-server v0.6.4 概念简介 在K8s中扩缩容分为两种 ●Node层面&#xff1a;对K8s物理节点扩容和缩容&#xff0c;根据业务规模实现物理节点自动扩…...

Excel:将一列拆分成多列

实现的效果是&#xff1a; 操作步骤如下&#xff1a; 1.选中列 → 点击菜单栏中的"数据" → 分列 2.选择"分列符号"&#xff0c;点击下一步 3.我想要按照空格分列&#xff0c;就选择空格 4.点击完成&#xff0c;就可以实现分列的效果了...

一款强大灵活的流程图引擎,支持React 和 Svelte 框架

大家好&#xff0c;今天给大家分享一个专注于处理流程可视化和交互的项目xyflow。它旨在为开发者和用户提供一种直观、高效的方式来表示、管理和操作各种流程。 项目介绍 xyflow是一款强大灵活的流程图引擎。该项目是用于构建基于节点的编辑器和交互式图表&#xff0c;支持 Re…...

基于STM32 ARM+FPGA+AD的电能质量分析仪方案设计(一)硬件设计

电能质量分析系统硬件设计 3.1 电能质量分析系统设计要求 本系统实现对电能质量的高精度测量&#xff0c;根据国家相关电能质量分析仪器规定 标准以及对市场电能质量分析仪的分析&#xff0c;指定以下设计目标。 &#xff08; 1 &#xff09;电能质量参数测量精度&#xf…...

LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 视频微调(LoRA) 教程(3)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142882496 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 SWIFT …...

jmeter实现SSL双向验证

前提: 预先了解:SSL单向/双向认证详解握手请求以及tomcat配置https请求的请到以下网址了解Java nginx https 双向认证 der,cer文件一般是二进制格式的,只放证书,不含私钥 crt 文件可能是二进制的,也可能是文本格式的,应该以文本格式居多,功能同der/cer pem文件一般是…...

数据结构 ——— 单链表oj题:相交链表(链表的共节点)

目录 题目要求 手搓两个相交简易链表 代码实现 题目要求 两个单链表的头节点 headA 和 headB &#xff0c;请找出并返回两个单链表相交的起始节点&#xff0c;如果两个链表不存在相交节点&#xff0c;则返回 NULL 手搓两个相交简易链表 代码演示&#xff1a; struct Lis…...

【WKWebview】WKWebView Cookie 同步

个人实测&#xff1a;js注入的方式更靠谱一点 ⌈iOS⌋WKWebView Cookie 同步的一种方式 屈服于 Apple 的“淫威”&#xff0c;开发者不得不将 App 的网页容器从 UIWebView 迁移到 WKWebView。我们在享受后者带来的性能和功能提升的同时&#xff0c;也被诸如 Cookie 同步、截图…...

vue-router拦截器

在 Vue 项目中&#xff0c;vue-router 的路由拦截器和组件内部的路由拦截器&#xff08;如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave&#xff09;虽然都能拦截路由&#xff0c;但它们的作用范围和使用场景有所不同。下面是二者的区别总结&#xff1a; 1. 全局路…...

SpringBoot驱动的人事管理系统:高效办公新选择

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…...

大数据干了什么?

1.大数据技术主要解决的问题是海量数据的 存储 和 查询...

android studio可用下载地址

AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 在此记录一下...

HTTP 协议详解

HTTP 协议是 Web 的基石&#xff0c;它定义了客户端和服务器之间的通信规则。本文将深入地探讨 HTTP 的核心概念&#xff0c;包括工作原理、请求方法、状态码以及不同 HTTP 版本的演进。 一、HTTP 的工作原理 HTTP 协议基于客户端-服务器模型&#xff0c;遵循请求-响应的循环&…...

【力扣 | SQL题 | 每日四题】力扣534, 574, 2314, 2298

今天的每日四题比较简单&#xff0c;主要其中两题可以用窗口函数轻松解决。 1. 力扣534&#xff1a;游戏玩法分析3 1.1 题目&#xff1a; 表&#xff1a;Activity ----------------------- | Column Name | Type | ----------------------- | player_id | int | …...

Gitxray:一款基于GitHub REST API的网络安全工具

关于Gitxray Gitxray是一款基于GitHub REST API的网络安全工具&#xff0c;支持利用公共 GitHub REST API 进行OSINT、信息安全取证和安全检测等任务。 Gitxray&#xff08;Git X-Ray 的缩写&#xff09;是一款多功能安全工具&#xff0c;专为 GitHub 存储库而设计。它可以用于…...

Chrome(谷歌)浏览器 数据JSON格式美化 2024显示插件安装和使用

文章目录 目录 文章目录 安装流程 小结 概要安装流程技术细节小结 概要 没有美化的格式浏览器展示 美化之后效果图 安装流程 下载地址 https://github.com/gildas-lormeau/JSONVue 点击下载 下载成功&#xff0c;如图所示 解压文件 添加成功&#xff0c;如图所示 通过浏览器…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...