实用干货:再见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/

结语

建立这个平台的初衷:

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

EasyExcel读取Excel数据(含多种方式)

目录 EasyExcel简介 使用EasyExcel进行读数据 引入依赖&#xff1a; EasyExcel提供了两种读取模式 使用 监听器 读取模式 1.创建一个实体类 2.创建监听器 代码 使用 同步读 读取模式 1.创建一个实体类 2.代码 添加导入数据库的逻辑 其实官方文档讲得很清楚&#xff…

基于YOLOv7算法的高精度实时水果目标检测识别系统(PyTorch+Pyside6+YOLOv7)

摘要&#xff1a;基于YOLOv7算法的高精度实时水果目标检测系统可用于日常生活中检测与定位苹果&#xff08;apple&#xff09;、香蕉&#xff08;banan&#xff09;、葡萄&#xff08;grape&#xff09;、橘子&#xff08;orange&#xff09;、菠萝&#xff08;pineapple&#…

【Linux进程控制(二)】进程程序替换(exec系列函数) and 自实现shell命令解释器

一、进程替换是什么&#xff1f; fork()之后&#xff0c;父子各自执行父进程代码 的一部分。如果子进程想执行全新程序 就会用到进程的程序替换来完成这个功能 程序替换&#xff1a;通过特定接口&#xff0c;加载磁盘 上的一个权限程序(代码和数据) 加载到调用进程的地址空间…

四六级高频词组12

目录 词组 其他链接 词组 501. &#xff08;a&#xff09; passion for 对…的热爱&#xff0c;热情 502. be patient with 对…耐心 503. pay for 赔偿&#xff0c; 付款&#xff0c; 报偿&#xff0c; 处罚 504. pay…for 付…的钱 505. &#xff08;be&#xff09; …

LabVIEW开发电能质量监测系统

LabVIEW开发电能质量监测系统 本研究基于LabVIEW开发了一个创新的电能质量监测系统&#xff0c;专注于暂态电能质量扰动信号的产生、分析与存储。该系统不仅模拟产生了电压骤降、电压波动、暂态振荡以及电压畸变等关键信号&#xff0c;还能够记录并存储这些扰动信号产生时的波…

数据库——审计及触发器

智能2112杨阳 一、目的与要求&#xff1a; 1.了解MySQL审计功能及实现方式 2.掌握触发器的工作原理、定义及操作方法 二、内容&#xff1a; 注&#xff1a; 在同一个触发器内编写多行代码&#xff0c;需要用结构begin ……end 函数current_user()获得当前登录用户名 1.…

cmake 从零开始源码安装(Ubuntu系统)

Ubuntu 系统安装 &#xff11;、安装编译工具和依赖库 ## 必要的 sudo apt install gsudo apt install make## 与make 同等级的构建工具&#xff0c;为了演示而安装的 sudo apt install ninja-build## 压缩工具库 sudo apt install unzip## 加密和传输(根据系统名称可能不一样…

重温经典struts1之文件上传

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 今天来学习下&#xff0c;每个项目都会有的文件上传功能&#xff0c;看看struts是怎么实现的。 步骤 编写三个jsp页面&#xff0c;一个是跳转到文件上传页面&#xff…

改造哈希表,封装unordered_map和unordered_set

正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 unordered_map是存的是pair是K&#xff0c;V型的&#xff0c;而unordered_set是K型的&#xff…

vsftp 使用虚拟用户 —— 筑梦之路

很久之前写过一遍安装vsftp的文章&#xff1a; CentOS 7 vsftpd服务器搭建记录——筑梦之路-CSDN博客 安装一条命令就可以搞定&#xff0c;这里不再赘述。 配置vsftpd.conf # /etc/vsftpd/vsftpd.conf文件修改以下配置#不允许匿名用户认证 anonymous_enableNO #NO表示所有用…

从 0 开始创建 SpringBoot 项目

从 0 开始创建 SpringBoot 项目 从 0 开始创建 SpringBoot 项目环境准备创建项目项目目录结构及说明编写代码参考 从 0 开始创建 SpringBoot 项目 环境准备 操作系统&#xff1a;Windows 10IDE&#xff1a;IntelliJ IDEA 2023.3.1Java 版本&#xff1a;jdk1.8 工具网盘链接&…

记一次挖矿病毒的溯源

ps&#xff1a;因为项目保密的原因部分的截图是自己在本地的环境复现。 1. 起因 客户打电话过来说&#xff0c;公司web服务异常卡顿。起初以为是web服务缓存过多导致&#xff0c;重启几次无果后觉得可能是受到了攻击。起初以为是ddos攻击&#xff0c;然后去查看web服务器管理…

【数据结构c实现】顺序表实现

文章目录 线性表线性表的顺序实现顺序表结构顺序表初始化增配空间Inc打印顺序表show_list线性表长度length尾部插入push_back头部插入push_front尾部删除pop_back头部删除pop_front按位置插入insert_pos按值查找find按位置删除delete_pos按值删除delete_val排序sort(冒泡&#…

【设计模式--行为型--观察者模式】

设计模式--行为型--观察者模式 观察者模式定义结构案例优缺点使用场景JDK中提供的实现例&#xff1a;警察抓小偷 观察者模式 定义 又被成为发布订阅模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生…

6.23删除二叉搜索树中的节点(LC450-M)

算法&#xff1a; 一共有五种可能的情况&#xff1a; 第一种情况&#xff1a;没找到删除的节点&#xff0c;遍历到空节点直接返回了找到删除的节点 第二种情况&#xff1a;左右孩子都为空&#xff08;叶子节点&#xff09;&#xff0c;直接删除节点&#xff0c; 返回NULL为根…

学习笔记10——Mysql的DDL语句

学习笔记系列开头惯例发布一些寻亲消息 链接&#xff1a;https://baobeihuijia.com/bbhj/contents/3/197161.html 数据库创建&#xff1a; CREATE DATABASE books&#xff1b; CREATE DATABASE IF NOT EXISTS books;更改字符集 ALTER DATABASE books CHARACTER SET gbk;库的删…

《数据结构、算法与应用C++语言描述》- 构建哈夫曼树

哈夫曼树 完整可编译运行代码见&#xff1a;Github::Data-Structures-Algorithms-and-Applications/_29huffmanTree 定长编码与可变长编码 定长编码 每个字符都用固定长度的编码来表示。 例如假设一个文本是由字符 a、u、x 和 z 组成的字符串&#xff0c;每个字符用2位二进…

ShardingSphereJDBC简单入门

ShardingSphere 介绍ShardingSphere-JDBCSharding-Sphere-ProxyShardingSphere-Sidecar混合架构运行模式DistSQL可拔插架构ShardingSphere的发展路线 主从复制ShardingSphere-JDBC功能SQL解析SQL支持程度SQL稳定支持SQL实验性支持 MySQL不支持SQL清单分页 数据分片垂直分片水平…

不再花冤枉钱!教你怎么选知识付费平台

在当今的知识付费市场中&#xff0c;用户面临的选择越来越多&#xff0c;如何从众多知识付费平台中正确选择属于自己的平台呢&#xff1f;下面&#xff0c;我们将为您介绍明理信息科技知识付费平台相比同行的优势&#xff0c;帮助您做出明智的选择。 一、创新的技术架构&#…

docker部署go gin框架 Windows环境

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