哈~这个vue3组件库中的组件真的是超多,不来试试吗?

简介: 随着vue在国内的越来越火,也应运而生了很多的优秀的UI组件库。都很有特点,也比较好用。如大家都能耳熟能详的 element-ui 和 Ant Design Vue都是非常不错的。可惜的是 element-ui 不再维护升级vue3了,不过它的继任者 element-plus确实正在如火如荼的开发着,支持vue3。喜欢 element-ui的一定不要错过它。

前言

随着vue在国内的越来越火,也应运而生了很多的优秀的UI组件库。都很有特点,也比较好用。如大家都能耳熟能详的 element-uiAnt Design Vue都是非常不错的。可惜的是 element-ui 不再维护升级vue3了,不过它的继任者 element-plus确实正在如火如荼的开发着,支持vue3。喜欢 element-ui的一定不要错过它。

不过今天我们要说的这个库可不是 element-plus,而是 PrimeVUE。一个号称组件超多的vue库。同样的支持vue2 和 vue3,还是比较不错的。不过唯一的不足就是没有中文版的文档,对于英文不好的同学可能没有那么友好了~~


官网

https://primefaces.org/primevue/showcase/#/setup

4edc953e2c684bbe819ffa954c899c08.png

4edc953e2c684bbe819ffa954c899c08.png4edc953e2c684bbe819ffa954c899c08.png4edc953e2c684bbe819ffa954c899c08.png

整体这样看还是挺漂亮的哈~


特点

  • 组件多:80+
    primeVUE支持超过80的组件,平时的开发完全没有问题。
  • 独立的css系统
    Primevue 有一套自己的css 系统,满足日常开发中的css功能,包括响应式功能,栅格化功能,flex功能等等
  • 开源协议
    遵循MIT开源协议,可以去github上下载完整代码
  • 丰富的可配置的主题
    超多的主题让你选择,material、bootstrap、flutentUI 等等

还有好多好多特性,可以去官网一一查看。这里不多介绍了


安装使用

这里还是以vue为例

安装

npm install primevue@^3.6.2 --save
npm install primeicons --save

模块加载

import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue);

组件注册

import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import Dialog from 'primevue/dialog';
const app = createApp(App);
app.use(PrimeVue);
app.component('Dialog', Dialog);

组件使用

<Dialog></Dialog>

样式的引入

primevue/resources/themes/saga-blue/theme.css       //theme
primevue/resources/primevue.min.css                 //core css
primeicons/primeicons.css                           //icons

独立的配置(可选)

如果你想使用一些配置,如Ripple,默认Ripple是关闭状态,可以单独开启

import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {ripple: true});

还有 z-index 配置

import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {
   zIndex: {
       modal: 1100,        //dialog, sidebar
       overlay: 1000,      //dropdown, overlaypanel
       menu: 1000,         //overlay menus
       tooltip: 1100       //tooltip
  }
});


总结

PrimeVUE在国内用的人还是比少的,大部分人用的都是Element系列,还有一个最近刚出比较火的naive-ui,可以查看我之前的文章,有介绍的。

关注我,分享给你最实用的前端信息,提高工作效率,拒绝加班~ 拒绝996~~

相关文章
|
3天前
|
JavaScript 网络架构
vue3 Elementplus 动态路由菜单不跳转问题
vue3 Elementplus 动态路由菜单不跳转问题
13 1
|
3天前
|
JavaScript 前端开发 API
vue3和vue2的区别
vue3和vue2的区别
|
3天前
|
JavaScript API 开发者
vue3 的生命周期
vue3 的生命周期
|
4天前
|
JavaScript 前端开发
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
|
2天前
|
JavaScript
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件
|
2天前
技术笔记:Vue3之emits
技术笔记:Vue3之emits
|
3天前
|
JavaScript
Vue学习系列(二)——组件详解
Vue学习系列(二)——组件详解
|
2天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
2天前
|
JavaScript