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