快速用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
下一篇: 在docker中开启sshd操作
推荐阅读
-
JCreator Pro怎么用?用JCreator Pro快速建立一个新项目教程
-
用Eclipse搭建Android开发环境并创建第一个Android项目(eclipse+android sdk)
-
Eclipse下怎么创建Web项目?用Maven创建Web项目的教程
-
用npm安装vue和vue-cli,并使用webpack创建项目的方法
-
Word2000用自定义项目符号创建项目符号列表
-
JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识
-
5分钟快速创建spring boot项目的完整步骤
-
从零开始制作cli工具,快速创建项目脚手架
-
用Eclipse搭建Android开发环境并创建第一个Android项目(eclipse+android sdk)
-
[Unity]创建项目环境用GithubDesktop管理Git代码的安装流程