PrimeVue初识

PrimeVue初识

新出的Vue UI 框架真的不少,大多数质量都挺高,最近接触了两个新的框架,一个是PrimeVue,一个是HeadlessUI,这个库也是历经了很多版本,目前东西挺丰富,这里先记录一下PrimeVueHeadlessUI踩坑刷了鞋再来。PrimeVue官网在这里

优势

源码简单

相信很多想你收前端同学都想看着源码提高自己,但是以我五年的前端经验,我看ElementUI还是费劲,可能是我太菜了吧,看源码我认为主要还是看框架作者的思路和用法,这点PrimeVue做的真的不错,它的组件编写甚至没有用CompsitionAPI,而是传统的Option方式,这有点反"尤"。😀😀😀,组件够纯粹,够简单,屎遁的时候甚至都能看两下学学。

样式够灵活

PassThrough

对于经常做项目的同学来说,使用一个框架需要经常修改框架的CSS,我通常是用单独的文件来管理,最后合并到一个类似global.scss之类的文件中,PrimeVue为我们提供了直接修改样式的方式,甚至可以通过setup上下文得到响应式数据来修改,这里他提供的PassThrough方式确实惊艳. 拿一个按钮来说,文档中直接提供了他的线框图。

接着我们可以在全局或者组件内部根据线框提供的PT Options直接定义样式。或者在全局提供globalCSS变量直接覆盖其已有的样式,方便维护。

Theming

修改主题大家天天干吧,PrimeVue提供了Stlyed Mode,有内置包括MD规范,Bootstrap,LAVA UI,等预设,还提供了Unstyled Mode,即组件只包含逻辑,无任何样式,可以通过TailwindCSS定义,或者让你们的UI姐姐们忙起来吧,😀😀😀。Styled Mode内置了样式修改器,修改的样式可以下载,并且通过内置函数可以一键切换,逻辑也很简单,就是对link文件增删。

PrimeFlex

大家配置TailWindCSS或者WindiCSS是不是有时候挺头疼,PrimeVueFLex直接内置了部分常用的AtomCSS样式,看图熟悉吧,用就完事了。

组件库够丰富

大部分大家用到的组件全齐,偏门一点包含但不限于下拉树,富文本,类苹果菜单,假控制台,等等很多,平时忙于业务的同学们,想做页面简单一点,用就完事了。

劣势

我使用了一个多月,几乎天天用,看文档,大家也知道用一个UI库会渐渐发现问题,到目前我整理了小部分,以后有再接着记录。

全英文

这里省略,同学们自行翻译。

表单孱弱

这个库的表单和Element UI等主流框架比起来就是个臭弟弟,样式几乎没有,直接用组件自己拼接,最要命的是没有内置的校验库,官方推荐的是Vee Validate但是这个库除了页面做的比较好以外,啥也不是。不但要绑架你的form还试图干扰你对表单数据做的一切工作,介入太强了,我不喜欢,我喜欢数据全部自己handle,而且文档完全看不懂。我目前是采用Vuelidate这个库,校验够简单,如果不行,加入yup估计也够用了。

bug

这个库更新的速度是比较快的,因为组件很多会导致bug的数量也不少,但是好在作者团队一直在维护,也得益于库有💴💴进账,Figma也有同步的设计库,这个问题倒是不大,如果只能在内网开发,导包费劲的同学请斟酌。

后面我会陆续更新组件的使用和踩坑记录,希望这个框架能帮助到大家。

相关推荐
Leyla9 分钟前
【代码重构】好的重构与坏的重构
前端
影子落人间12 分钟前
已解决npm ERR! request to https://registry.npm.taobao.org/@vant%2farea-data failed
前端·npm·node.js
世俗ˊ37 分钟前
CSS入门笔记
前端·css·笔记
子非鱼92137 分钟前
【前端】ES6:Set与Map
前端·javascript·es6
6230_41 分钟前
git使用“保姆级”教程1——简介及配置项设置
前端·git·学习·html·web3·学习方法·改行学it
想退休的搬砖人1 小时前
vue选项式写法项目案例(购物车)
前端·javascript·vue.js
加勒比海涛1 小时前
HTML 揭秘:HTML 编码快速入门
前端·html
啥子花道1 小时前
Vue3.4 中 v-model 双向数据绑定新玩法详解
前端·javascript·vue.js
麒麟而非淇淋1 小时前
AJAX 入门 day3
前端·javascript·ajax
茶茶只知道学习1 小时前
通过鼠标移动来调整两个盒子的宽度(响应式)
前端·javascript·css