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开发者的组件选择,它的易用性和性能优势使得在开发过程中得心应手。无论是前端新手还是经验丰富的开发者,都能从中受益。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/443593.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov8-pose的TensorRT动态库部署(C++)

文章目录 参考代码概要硬件动态库代码文件结构头文件yolov8-pose.hyolov8-pose.cppCMakeLists.txt调用例子main.cppCMakeLists.txt获取engine模型测试结果参考代码 https://github.com/triple-Mu/YOLOv8-TensorRT 概要 为了方便使用,基于上述开源代码,将其封装成动态库,方…

GAMES104:16 游戏引擎的玩法系统:基础AI-学习笔记

文章目录 一&#xff0c;寻路/导航系统Navigation1.1 Walkable Area1.1.1 Waypoint Network1.1.2 Grid1.1.3 Navigation Mesh1.1.4 Sparse Voxel Octree 1.2 Path Finding1.2.1 Dijkstra Algorithm迪杰斯特拉算法1.2.2 A Star&#xff08;A*算法&#xff09; 1.3 Path Smoothin…

在不支持WSL2的Windows环境下安装Redis并添加环境变量的方法

如果系统版本支持 WSL 2 可跳过本教程。使用官网提供的教程即可 官网教程 查看是否支持 WSL 2 如果不支持或者觉得麻烦可以按照下面的方式安装 下载 点击打开下载地址 下载 zip 文件即可 安装 将下载的 zip 文件解压到自己想要解压的地方即可。&#xff08;注意&#x…

Python 工具库每日推荐【Pillow】

文章目录 引言Python图像处理库的重要性今日推荐:Pillow工具库主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:创建图像拼贴案例分析高级特性图像增强图像水印扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScript 设计模式 专栏,感兴…

深入理解HTTP Cookie

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 HTTP Cookie定义工作原理分类安全性用途 认识 cookie基本格式实验测试 cookie 当我们登录了B站过后&#xff0c;为什么下次访问B站就…

JavaScript 变量的简单学习

目录 1. 变量 1.1 变量是什么 1.2 变量基本使用 1.2.1 声明变量 1.2.2 变量赋值 1.2.3 变量更新 1.2.4 声明多个变量 1.3 变量案例 1.3.1 弹出姓名 1.3.2 交换变量的值 1.4 变量的本质 1.5 变量命名规则 1.6 var VS let 1. 变量 1.1 变量是什么 1.2 变量基本使用 …

Lazada菲律宾本土店选品怎么操作?EasyBoss ERP选品功能来帮你!

由于Lazada本土店在流量、履约速度、类目限制以及回款速度方面的优势&#xff0c;越来越多的Lazada卖家都在考虑转型做本土店&#xff0c;但本土化落地并不是一件容易的事&#xff0c;很多卖家在选品阶段就踩大坑了。 因此&#xff0c;为了选品不踩坑&#xff0c;很多卖家都会…

天海一体,遨游双卫星智能终端扬帆5G智慧海洋

海洋面积占地球表面的70%以上&#xff0c;世界贸易的90%左右由国际海运行业承运。但是&#xff0c;信号覆盖不均、通信延迟高、定位精度不足等问题&#xff0c;严重制约了海洋作业的效率与安全。智慧海洋&#xff0c;通信先行&#xff0c;AORO M5-5G双卫星智能终端应时代需求而…

螺蛳壳里做道场:老破机搭建的私人数据中心---Centos下Docker学习06(Docker网络连接)

如果要搭建基于docker的私人DC&#xff0c;除了虚拟机网络连接外&#xff0c;就得掌握docker的网络连接。磨刀不误砍柴工&#xff0c;或者说工欲善其事必先利其器&#xff0c;我们先学学典型的docker的网络连接方式。Docker的网络连接有四种&#xff1a;bridge、none、containe…

【10086网上营业厅-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

【小沐学CAD】ParaView Web的学习笔记(Python)

文章目录 1、简介1.1 visualizer1.2 Divvy1.3 Lite1.4 LightViz1.5 ArcticViewer1.6 HPCCloud1.7 glance1.8 trame 结语 1、简介 https://pvw.kitware.com/ VTK/ParaView Web&#xff0c;用于 Web 数据处理和可视化的框架 ParaViewWeb 是一个 Web 框架&#xff0c;用于在 Web …

大数据-162 Apache Kylin 全量增量Cube的构建 Segment 超详细记录 多图

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Redis:分布式 - 哨兵

Redis&#xff1a;分布式 - 哨兵 概念哨兵 Docker 搭建哨兵分布式选举流程 概念 Redis 的主从复制模式下&#xff0c;一旦主节点由于故障不能提供服务&#xff0c;需要人工进行主从切换&#xff0c;同时大量的客户端需要被通知切换到新的主节点上&#xff0c;对于上了一定规模…

【LeetCode HOT 100】详细题解之回溯篇

【LeetCode HOT 100】详细题解之回溯篇 回溯法的理论基础回溯法解决的问题理解回溯法回溯法模板 46 全排列思路代码 78 子集思路代码 17 电话号码的字母组合思路代码 39 组合总和思路代码 22 括号生成思路代码 79 单词搜索思路代码 131 分割回文串思路代码 51 N皇后思路代码 回…

打造梦幻AI开发环境:一步步解锁高效配置的魅力

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言&#…

疾病防控|基于springBoot的疾病防控综合系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何…

基于SpringBoot+Vue的农场管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

通过Fiddler抓包采集某音作品列表,视频列表

声明&#xff1a;文章仅用于学习交流,如有侵权请联系删除 今天分享下某音app作品列表采集方法&#xff0c;我只详细说一下大步骤&#xff0c;细节就不多说了&#xff0c;留着大家去试吧 我们通过Fiddler 快捷方式 配置好代理 打开抖音进行抓包&#xff0c;随便找个达人打开主…

计算机的错误计算(一百一十七)

摘要 算式“(5^25*(1/25)^(1/5)*3^25(1/25)^(1/5)*5^25*3^(251/5)-(9/25)^(1/5)*3^25*5^25-(1/25)^(1/5)*3^25*5.0^25*(13^(1/5)-3^(2/5.0)))” 的准确值是0. 但是&#xff0c;Python 与 Excel 均输出了错误结果&#xff1a;一个含有15位整数&#xff0c;一个含有14位整数。 …

stm32学习笔记-RTC实时时钟

文章目录 一、RTC基础知识1.1 RTC简介1.2 RTC的晶振 二、stm32的RTC2.1 RTC和后备寄存器2.2 stm32 RTC结构框图及特性 三、stm32 RTC编程2.1 RTC初始化2.2 RTC控制程序 一、RTC基础知识 1.1 RTC简介 实时时钟的缩写是RTC(Real_Time Clock)。RTC 是集成电路&#xff0c;通常称…