您现在的位置是：理财鱼 > 今日热点 >

今日热点

一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue

发布时间：2021-07-02 10:23今日热点次评论

　　PrimeVue是一个在Github上开源的，功能强大、易于使用、多功能、高性能的 Vue UI 组件库，可帮助Web开发者构建高性能的UI页面，在当前Vue3生态的生态下（PrimeVue全面支持Vue2和Vue3），是对Vue3生态的一个极大的补充和促进！我们来简单地看一看PrimeVue有何过人之处！

　　Github https://github.com/primefaces/primevue特性

80+ 组件

　　primevue涵盖了高质量的80多个常用的组件

MIT开源许可

　　完整的 UI 套件基于 MIT 许可证免费提供，源代码可在 GitHub 上获得，

主题系统

　　建立在与设计无关的基础架构上，从大量主题中进行选择，例如material, bootstrap或者自定义你自己的主题。

模板

　　由专业设计师设计并由 Vue 工程师制作 Vue-CLI 应用程序模板。

可靠性

　　面向所有人的用户界面组件

卓越的支持服务

　　可在 1 工作日内做出响应，并可选择请求增强功能和新功能。

高效率

　　primevue可以让开发者的效率得到提高

社区

　　可以在社区与其它成员参与讨论和协作

移动端支持

　　对于移动端触摸设备提供一流的支持

　　安装使用

　　这里我们以Vue3 的项目为例，使用你习惯的管理工具进行安装

　　npm install primevue@^3.5.1 --save npm install primeicons --save //或者 yarn add primevue@^3.5.1 yarn add primeicons

模块化加载

　　比较适合使用vite或者webpack（配置了vue-loader）

　　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);

　　使用

　　或者单独引用组件

　　import Dialog from 'primevue/dialog/sfc';

　　主题样式文件：

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

　　PrimeVue 附带各种免费主题可供选择

　　你还可以安装PrimeFlex来帮助你完成布局方面的工作。

全局配置

　　同时你还可以配置一些全局配置，比如：

　　Ripple 可选动画。默认情况下它是禁用的，需要在 PrimeVue 设置期间在应用程序的入口文件（例如 main.js）中启用。

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

　　全局文本框样式配置

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

　　全局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还支持国际化以及完整的Typescript类型支持，兼容主流的Chrome内核浏览器

　　组件

　　这里我们就不介绍所有的组件了，感兴趣的小伙伴可以先通过截图感受一下：