PrimeVue 入门

下载

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

npm install primevue --save
npm install primeicons --save

PrimeFlex

PrimeFlex是一个CSS实用程序库，具有各种辅助功能，例如网格系统，flexbox，间距，高程等。尽管不是必需的，但强烈建议添加PrimeFlex，因为在开发应用程序时可能需要此类实用程序

npm install primeflex --save

模块装载机

如果您的应用程序使用vue-cli或配置了vue-loader的基于Webpack的构建，则这是推荐的方法。将组件作为.vue文件导入，以便在项目内无缝集成，其中每个组件的路径在组件文档的“导入”部分中均可用。

//import ComponentName from 'primevue/componentname';
import Dialog from 'primevue/dialog';

在下一步中，使用您要使用的标签名称注册组件。

Vue.component('Dialog', Dialog);

然后，您将能够在应用程序中利用该组件。

<Dialog></Dialog>

脚本标签

另一种选择是直接在浏览器中使用带有UMD软件包的组件。

<meta charset="utf-8">
<title>calendar demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css " rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css " rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css " rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/primevue/components/calendar/calendar.umd.min.js"></script>
 
<div id="app">
  <p-calendar></p-calendar>
</div>
 
<script>
new Vue({
  components: {
    'p-calendar': calendar
  }
}).$mount('#app')
</script>

依存关系

PrimeVue的大多数组件（95％）是本机组件，并且有一些具有第三方依赖关系的例外，例如Quill for Editor。

此外，组件需要PrimeIcons库中的图标。

dependencies: {
    "vue": "^2.6.10",
    "primeicons": "^4.0.0"
}

这是具有第三方依赖性的组件的列表。

款式

css依赖项如下所示，请注意，您可以选择另一个主题来更改主题。如果您将打包程序（例如webpack）与css加载程序一起使用，则可以将其导入到主应用程序组件中。

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

免费主题

PrimeVue附带32个免费主题供您选择。

primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css
primevue/resources/themes/bootstrap4-dark-purple/theme.css
primevue/resources/themes/md-light-indigo/theme.css
primevue/resources/themes/md-light-deeppurple/theme.css
primevue/resources/themes/md-dark-indigo/theme.css
primevue/resources/themes/md-dark-deeppurple/theme.css
primevue/resources/themes/mdc-light-indigo/theme.css
primevue/resources/themes/mdc-light-deeppurple/theme.css
primevue/resources/themes/mdc-dark-indigo/theme.css
primevue/resources/themes/mdc-dark-deeppurple/theme.css
primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-orange/theme.css
primevue/resources/themes/saga-purple/theme.css
primevue/resources/themes/vela-blue/theme.css
primevue/resources/themes/vela-green/theme.css
primevue/resources/themes/vela-orange/theme.css
primevue/resources/themes/vela-purple/theme.css
primevue/resources/themes/arya-blue/theme.css
primevue/resources/themes/arya-green/theme.css
primevue/resources/themes/arya-orange/theme.css
primevue/resources/themes/arya-purple/theme.css
primevue/resources/themes/nova/theme.css
primevue/resources/themes/nova-alt/theme.css
primevue/resources/themes/nova-accent/theme.css
primevue/resources/themes/nova-vue/theme.css
primevue/resources/themes/luna-amber/theme.css
primevue/resources/themes/luna-blue/theme.css
primevue/resources/themes/luna-green/theme.css
primevue/resources/themes/luna-pink/theme.css
primevue/resources/themes/rhea/theme.css

波纹

波纹是受支持的组件（例如按钮）的可选动画。默认情况下禁用它，需要使用$ primevue实例变量在应用程序的入口文件（例如main.js）中启用它。

Vue.prototype.$primevue = {ripple: true};

快速开始

可以在github上找到基于vue-cli 的示例应用程序。

typescript

由于PrimeVue的npm软件包中提供了类型定义文件，因此完全支持Typescript。github上也提供了一个示例打字稿原始应用程序。

Nuxt.js集成

通过以下步骤，可以轻松地将PrimeVue添加到Nuxt.js。

1）将primevue.js与您要使用的组件一起添加到plugins文件夹中。

import Vue from 'vue';
import InputText from 'primevue/inputtext';
import Button from 'primevue/button';
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
 
Vue.use(ToastService);
 
Vue.component('InputText', InputText);
Vue.component('Button', Button);
Vue.component('Toast', Toast);

2）添加需要CSS依赖项以及nuxt.config.js中的插件配置。

css: [
    {src: 'primevue/resources/primevue.min.css'},
    {src: 'primevue/resources/themes/saga-blue/theme.css'},
    {src: 'primeicons/primeicons.css'},
  ],
plugins: [
    {src:'~/plugins/primevue.js', mode: 'client'}
]

就是这样，有关完整示例，请参阅primevue-nuxtjs-quickstart示例。