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

Vedu • 2021-07-12 12:54 • 资源分享 • 阅读 1738

介绍

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

使用

<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内核浏览器

组件

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

按钮我们切换下主题试试

后续组件就不切换主题查看了，风格就和上面类似，提供了很多组主题可供选择，下面是一些其它组件的截图：

上面两个是表格，表格的功能相当的强悍

组件实在太多，以上知识截图了一部分，仅供参考，完整的体验可以参考文档，文档中都有非常详细的介绍以及使用方式

总结

PrimeVue是一个为数不多的高质量Vue组件库，同时支持Vue2 和 Vue3，像Antd、Element UI以及naive-ui等都是比较不错的组件，PrimeVue相较而言是比较陌生的一个，也算是对这一类生态的一个补充，可以作为一个不错的选择！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/24934.html

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

介绍

Github

特性

安装使用

组件

总结

相关推荐

发表评论