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示例。