欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

快速用angular+ng-zorro创建项目

程序员文章站 2022-03-07 09:37:25
创建项目选择带路由ng new abccd abcng add ng-zorro-antd创建完项目,创建两个组件ng g c cmp1ng g c cmp2在appcomponent中添加在app-routing.module.ts中添加路由const routes: Routes = [ { path: '', redirectTo: 'cmp1', pathMatch: 'full' }...

创建项目

ng new abc --style css --routing
cd abc
ng add ng-zorro-antd

创建完项目,创建两个组件

ng g c cmp1
ng g c cmp2

在appcomponent中添加 <router-outlet></router-outlet>
在app-routing.module.ts中添加路由

const routes: Routes = [
  { path: '', redirectTo: 'cmp1', pathMatch: 'full' },
  { path: 'cmp1', component: Cmp1Component},
  { path: '**', redirectTo: 'cmp1' }
];

运行项目npm start

引进zorro样式

在组件所在的module中引入NgZorroAntdModule,
在style.css中引用@import "~ng-zorro-antd/ng-zorro-antd.min.css";

参考:https://ng.ant.design/docs/getting-started/zh

部署

用mac OS 自带的web服务器SimpleHTTPServer部署静态网站

$ cd abc/dist/Abc
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

打开http://localhost:8000

本文地址:https://blog.csdn.net/qq_27848323/article/details/109629761

相关标签: 前端 angular