Angular15使用primeng框架

791 阅读1分钟

primeng 是什么

官网地址

PrimeNG 是一个极为完善的开源 Angular UI 组件库,PrimeNG是一个大而全的组件库,提供了超过80种的组件和多种主题供开发者选择,能够应付大部分的业务场景。但是灵活性比较差,在对样式细节要求比较高的场景下,组件的样式修改会显得非常麻烦,并且对数据格式要求严格,对定制个人的组件不友好

适用场景:业务需求比较明确,对样式自定义要求不高,能在PrimeNG中找到对应组件且直接使用就能满足业务要求的不需要功能拓展的场景。

怎么使用

1、本地安装volta管理node版本

2、执行volta install node@16.13 使用node16 进行开发

3、volta install @angular/cli 会自动安装 Angular CLI 工具

4、ng new ng-demo 会自动创建一个angular项目

1678440445701.png

5、npm install primeng --save npm install primeicons --save 安装依赖

6、在 angular.json 文件中找到样式数组并添加以下内容:

...
"styles": [
    "node_modules/primeicons/primeicons.css",
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    ...
]

7、这样就可以在相应模块中使用primeng 的组件了,使用前需要引入

primeng 有相应的图表组件,不过他是基于Charts.js 封装的,如果要使用需要使用 npm 安装 charts.js 包,然后将其包含在您的项目中

npm install chart.js --save

"scripts": [
    "../node_modules/chart.js/dist/chart.js",
    //..others
],

primeng 有个免费模板sakai-ng,下载地址为https://github.com/primefaces/sakai-ng,可以直接基于该模板开发

primeflex

PrimeFlex 是一个轻量级响应式 CSS 实用程序库,可与 Prime UI 库和静态网页一起使用。

官网地址

扫码_搜索联合传播样式-标准色版.png