《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的PrimeVue 是一组丰富的 Vue 开源 UI 组件。

模块加载器

如果您的应用程序使用Vue CLI、Vite或具有配置了vue-loader的基于 webpack 的构建，这是推荐的方式。

PrimeVue 在npm上可用，如果您有一个现有的应用程序，请运行以下命令将 PrimeVue 和 PrimeIcons 下载到您的项目中。

npm install primevue@^3.17.1-SNAPSHOT --savenpm install primeicons --save

下一步是设置 PrimeVue 配置。

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 后可访问的全局配置中。

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

函数的第二个参数可用于在 PrimeVue 安装期间启动语言环境。

app.use(PrimeVue, {    locale: {        accept: 'Aceptar',        reject: 'Rechazar',        //...    }});

从各种主题中进行选择或轻松开发出自己的主题。

主题

PrimeVue 提供各种免费主题和高级主题以及提供应用程序布局的高级模板。所有免费主题都是使用主题设计器构建的，npm 包带来了主题的 CSS 输出，而 SCSS 作为设计器中的高级功能保留。这意味着免费主题是开源的，并且要使用 SASS 进行定制，需要获得设计师许可证。

定制

主题的 CSS 与 MIT 的 PrimeVue 共享相同的许可证，这意味着可以根据您的需要自定义生成的 CSS，但是如果您的自定义不简单，则应避免这种情况。例如，即使要更改原色，因为没有变量，所以应该多次执行查找和替换。另一方面，这可以通过更改单个变量来实现，例如 $primaryColor。访问SASS API以获取可用自定义选项的文档。

用户界面

—END—

开源协议：MIT license

开源地址：