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示例。
- 使用Spring Cloud Security OAuth2搭建授权服务
- Nginx性能优化
- linux 如何正确的关闭mongodb
- 运用Aggregator模式实现MapReduce
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- spring boot项目在外部tomcat环境下部署
- 利用Actor实现管道过滤器模式
- SpringBoot整合Quartz定时任务 的简单实例
- 从机器学习学python(一) ——numpy中的shape、tile、argsort
- 剖析响应式编程的本质
- 从机器学习学python(二) ——iteritems、itemgetter、sorted、sort
- 基于MVC理解React+Redux
- JavaScript的IIFE(即时执行方法)
- 从机器学习学python(三) ——数组冒号取值与extend
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Trie - 208. Implement Trie (Prefix Tree)
- Tree - 337. House Robber III
- Tree - 250. Count Univalue Subtrees
- Tree - 124. Binary Tree Maximum Path Sum
- Tree - 110. Balanced Binary Tree
- Tree - 104. Maximum Depth of Binary Tree
- Tree - 298. Binary Tree Longest Consecutive Sequence
- Tree - 111. Minimum Depth of Binary Tree
- Tree - 129. Sum Root to Leaf Numbers
- Tree - 113. Path Sum II
- DFS&BFS - 200. Number of Islands
- Backtracking - 93. Restore IP Addresses
- Backtracking - 17. Letter Combinations of a Phone Number
- Backtracking - 60. Permutation Sequence
- Backtracking - 47. Permutations II