PrimeVue初识

PrimeVue初识

新出的Vue UI 框架真的不少，大多数质量都挺高，最近接触了两个新的框架，一个是PrimeVue,一个是HeadlessUI，这个库也是历经了很多版本，目前东西挺丰富，这里先记录一下PrimeVue，HeadlessUI踩坑刷了鞋再来。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也有同步的设计库，这个问题倒是不大，如果只能在内网开发，导包费劲的同学请斟酌。

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