实用干货:再见ElementPlus,我有更好的了

大家好,我是大澈!

本文约1200+字,整篇阅读大约需要3分钟。

感谢关注微信公众号:“程序员大澈”,免费领取"面试大礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 干货速览

说起 Element Plus ,应该很多朋友都正在用着。

先聊聊它的优点:

  • Element Plus 很好的支持 Vue3

  • 拥有清晰的中文文档

  • 样式设计很简洁

  • API相对来说也比较完善。

但是正因为如此,不得不谈谈它的缺点:

  • 有些API文档,还要切换到 ElementUI 的 Vue2 版本才能找到详细信息

  • 样式设计比较保守,没有太多令人惊艳的地方

  • 组件不够齐全

所以说一直没有找到,一个适用于 Vue3 的更好的组件库。虽然也有一些比较好看的组件库,但是组件还不如 ElementUI 齐全。

图片

直到我发现了 PrimeVue,觉得这才是我要找的组件库。PrimeVue 的设计让人感觉非常舒服,而且它拥有超过 90 个组件,比 ElementUI 还要多。

当然,缺点也是有的,中文文档不完整,只能看英文文档,对英文要求较高。

2. 干货详述

先说几个 PrimeVue 比较有特色的组件。

2.1 Dock

Dock 是一个由菜单项组成的导航组件,模拟苹果 macOS 的 Dock 效果。

默认位置是底部,当使用位置属性定义时,其他边缘也可用。

项目中用上直接起飞!

图片

2.2 Galleria

Galleria 是一个图片内容库组件,可用于高分辨率大图像的展示。

Galleria 需要一个值作为图像集合,用于更高分辨率图像的项目模板以及用于显示为缩略图的缩略图模板。

类似组件曾经在一个项目中使用过,当时是自己手撸的,要是那时就发现这个组件库,估计又能节省不少时间摸鱼呢。

图片

2.3 Chart

Chart 是一个图表组件,使用它可以无缝衔接各种数据图表。

它基于Chart.js,是一个 HTML5 的开源图表库。

图表配置了 3 个属性:类型、数据和选项。图表类型是使用type属性定义的,该属性接受饼图、柱状图等作为值。数据定义了用图表表示的数据集。选项提供了许多自定义选项,来进行各种自定义。

图片

2.4 快速体验一下

如果你想要体验一下,可以按照下面的步骤进行安装使用。

安装:

# npm
npm install primevue# yarn
yarn add primevue

注册:

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import 'primevue/resources/themes/lara-light-teal/theme.css'
import 'primevue/resources/primevue.min.css'const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

使用:

import Button from 'primevue/button';<Button label="Submit" />

最后,要查看 PrimeVue 更多详细,请走传送门:https://primevue.org/

结语

建立这个平台的初衷:

  • 打造一个仅包含前端问题的问答平台,让大家高效搜索处理同样问题。

  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关的知识点。

  • 遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。

感谢关注微信公众号:“程序员大澈”,免费领取"面试大礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

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

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

相关文章

任务调度系统就该这么设计(万能通用),稳的一批!

今天来扒一扒轻量级的分布式任务调度平台Xxl-Job背后的架构原理 核心概念 这里还是老样子&#xff0c;为了保证文章的完整性和连贯性&#xff0c;方便那些没有使用过的小伙伴更加容易接受文章的内容&#xff0c;快速讲一讲Xxl-Job中的概念和使用 如果你已经使用过了&#xf…

在VS2010上使用C#调用非托管C++生成的DLL文件(图文讲解)

背景 在项目过程中&#xff0c;有时候你需要调用非C#编写的DLL文件&#xff0c;尤其在使用一些第三方通讯组件的时候&#xff0c;通过C#来开发应用软件时&#xff0c;就需要利用DllImport特性进行方法调用。本篇文章将引导你快速理解这个调用的过程。 步骤 1. 创建一个CSharp…

Java 8特性:Lambda表达式、函数式接口与Stream API的深度探索

一、引言 随着编程范式的不断演变&#xff0c;Java语言也在不断地发展和创新。Java 8的发布&#xff0c;为开发者们带来了诸多全新的特性&#xff0c;其中包括Lambda表达式、函数式接口以及Stream API。这些特性使得Java语言的编程更加简洁、优雅&#xff0c;同时也提高了代码…

mybatis多表映射-对多关联

1、建库建表 create database mybatis-example; use mybatis-example; create table t_book (bid varchar(20) primary key,bname varchar(20),stuid varchar(20) ); insert into t_book values(b001,Java,s001); insert into t_book values(b002,Python,s002); insert into …

第16节:Vue3 响应式对象reactive()

在UniApp中使用Vue3框架时&#xff0c;你可以使用reactive()函数来创建一个响应式对象。reactive()函数返回一个响应式引用对象&#xff0c;它包装了一个普通的对象&#xff0c;使得该对象能够成为响应式数据源。 下面是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架…

docker部署go gin框架 Windows环境

目录 文章目的是什么 环境介绍 Windows 环境下 docker 部署 go gin 详细步骤 运行容器时因为挂载文件可能会出现的问题 直接部署gin&#xff08;跳过运行容器时因为挂载文件可能会出现的问题&#xff09; 文章目的是什么 假设我们学习了 go 语言&#xff0c;在 Windows(本…

6.rk3588获取摄像头和激光雷达数据(用线程根据时间同步)

文件夹结构如下&#xff1a; 如果没有特殊说明&#xff0c;我们将py文件写在该路径里面。 保存数据的路径如下&#xff1a; ---img_lidar_save ---2023-12-13&#xff08;根据日期自动生成当天保存数据的文件夹) ---camera_data(相机数据文件夹&#xff09; ---image(保存相加…

[蓝桥杯刷题]合并区间、最长不连续子序列、最长不重复数组长度

前言 ⭐Hello!这里是欧_aita的博客。 ⭐今日语录: 成功的关键在于对目标的持久追求。 ⭐个人主页&#xff1a;欧_aita ψ(._. )>⭐个人专栏&#xff1a; 数据结构与算法 数据库 文章目录 前言合并区间问题&#x1f4d5;现实应用大致思路代码实现代码讲解 最长不连续子序列&a…

jvisualvm手动安装VisualGC插件

前言 笔者近期排查问题需要查看GC的情况&#xff0c;于是用到了jvisualvm这个工具&#xff0c;查阅网上资料发现它有一个名为VisualGC的插件非常好用&#xff0c;于是笔者以此文记录一下VisualGC插件的安装步骤。 安装步骤 下载插件 首先我们要到官网 https://visualvm.gi…

未势能源受邀参加中国氢能100人论坛并发表演讲

12月12日-14日&#xff0c;“2023氢能嘉年华暨中国氢能100人论坛年会”在苏州举办&#xff0c;行业内专家学者、氢能头部企业代表等齐聚现场&#xff0c;聚焦氢能在化工、钢铁、交通等领域发展&#xff0c;共同探讨我国氢能产业初期前进之路。 未势能源液氢总工程师黄欢明受邀…

Java发起post和get请求

本文分享两种方式&#xff0c;一种是使用HttpURLConnection &#xff0c;另一种是使用 Apache HttpClient 使用 HttpURLConnection 发送 GET 请求&#xff1a; import java.net.HttpURLConnection; import java.net.URL; import java.io.BufferedReader; import java.io.Inpu…

DevOps搭建(六)-安装Maven详细步骤

1、官网下载 下载地址&#xff1a; Maven – Download Apache Maven 2、上传压缩包到服务器 把下载好的压缩包上传到服务器上。 3、解压压缩包 解压压缩包到安装目录/usr/local/ tar -zxvf apache-maven-3.9.3-bin.tar.gz -C /usr/local/ 切换到/usr/local目录下ls命令看…

基于FPGA的视频接口之高速IO(光纤)

简介 对于高速IO口配置光纤,现在目前大部分开发板都有配置,且也有说明,在此根据自己的工作经验以及对于各开发板的说明归纳 通过高速IO接口,以及硬件配置,可以实现对于光纤的收发功能,由于GTX的速率在500Mbs到10Gbps之间,但通道高速io可配置光纤10G硬件,物理通完成,则…

SpringIOC之Jsr330ScopeMetadataResolver

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

科东软件Intewell操作系统:以“鸿”鹄之志,创未来之“道”

打造自主可控的新型工业操作系统是我国加速新型工业化进程&#xff0c;在新一轮科技革命中实现“换道超车”的重要契机。科东软件期待凭借鸿道Intewell新型工业操作系统的创新与应用&#xff0c;打造100%自主可控的工业网络和工业控制底层技术&#xff0c;为我国新型工业化贡献…

顶级Web应用程序测试工具列表

今天主要列举Web应用程序的工具。 今天的列表仅仅提供索引功能&#xff0c;具体要使用的同学&#xff0c;可以自行搜索哦。 通过web应用程序测试&#xff0c;在web应用程序公开发布之前&#xff0c;会发现网站功能、安全性、可访问性、可用性、兼容性和性能等问题。 Web应用程…

JavaScript运算符 operator 操作符:

运算符对一个值或多个值进行运算 - 通过运算符可以对一个或多个值进行各种运算 - 大部分的运算符并不会影响到原来的变量 - 算术运算符 - 算术运算符可以用来对两个值进行算术运算 - 用来计算符号两侧值的和 - - 用来计算符号两侧值的差 - * 乘法 - / 除法 - ** 幂运…

JavaScript 数组常用的方法(删除数组中的某个值)二

删除数组中的某个值 splice() 方法&#xff1a;该方法可用于删除数组中的一项或多项&#xff0c;并返回删除的项。splice() 方法接受两个参数&#xff0c;第一个参数是要删除的起始位置&#xff0c;第二个参数是要删除的项数。 注意&#xff1a; splice() 方法会修改原始数组&…

模板方法模式(行为型)

目录 一、前言 二、模板模式 三、带钩子的模板模式 四、总结 一、前言 模板方法模式是一种行为型设计模式&#xff0c;它定义了一个操作中的算法框架&#xff0c;将一些步骤延迟到子类中实现。这种模式是基于“开闭原则”的设计思想&#xff0c;即对扩展开放&#xff0c;对…

JAVA:乘除窗体的实现

目录 题目要求&#xff1a; 窗口的实现&#xff1a; try 和 catch 的用法&#xff1a; 思路大意&#xff1a; 关键代码的实现&#xff1a; 题目要求&#xff1a; 使用 try 和catch 方法完成乘法除法的异常处理和窗体的实现&#xff0c;如下图所示&#xff1a; 窗口的实…