Angular 15引入ng-devui

一、安装angular cli

npm install -g @angular/cli

 

二、使用angular cli新建项目

ng new test

 

三、使用npm引入ng-devui

npm i ng-devui
# 可选,字体图标库, 部分Demo依赖此字体库
# npm i @devui-design/icons

 

四、为angular引入ng-devui的基础配置和样式

1、打开app.module.ts,引入ng-devui:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DevUIModule } from 'ng-devui';

接着,找到imports,追加这段代码:

    BrowserAnimationsModule,
    DevUIModule

 

2、打开angular.json,找到styles,追加这段代码:

"node_modules/ng-devui/devui.min.css"

 

五、新建测试组件、引入测试组件

ng generate component primary

打开app.component.html,加入这段代码:

<app-primary></app-primary>

 

六、启动项目、查看效果

ng serve --open

 

 

参考资料:

https://angular.cn/guide/setup-local

https://devui.design/components/zh-cn/get-start

posted @ 2023-06-28 19:07  jamstack  阅读(164)  评论(0编辑  收藏  举报