使用angular-cli创建angular2项目与引入ng-zorro

tips：使用的工具为visual studio  code；下载地址为https://code.visualstudio.com/

1.检查是否安装了node.js

npm -v

2.安装angular-cli

npm install -g @angular/cli

3.检查安装angular-cli是否成功

ng v

或者

ng -version

4.创建angular2项目

ng new projectname

或者

ng new projectname --routing   //创建一个带routing的项目

5.进入项目

cd projectname

6.执行项目

ng serve

或者

npm start

7.成功界面

8.引入ng-zorro前端UI框架

ng add ng-zorro-antd

9.安装ng-zorro组件

npm install ng-zorro-antd --save

10.成功界面

                        

11.ng-zorro网址(https://ng.ant.design/docs/introduce/zh)

12.如果angular项目没有node_modules文件

npm install

13.angular-cli指令

ng g cl my-new-class         新建 class

ng g c my-new-component      新建组件

ng g d my-new-directive      新建指令

ng g e my-new-enum           新建枚举

ng g m my-new-module         新建模块

ng g p my-new-pipe           新建管道

ng g s my-new-service        新建服务


ng generate module 模块名 --routing      创建带路由的模块 

ng generate component 模块名/组件名       创建模块下的组件

ng generate service hero --module=app    创建全局服务 


ng serve --port 8990 --open              运行程序：

--port                                   表示程序运行的端口号为8990

--open                                   打开到浏览器，访问程序

ng build  --prod                         打包构建程序：

--prod                                   会进行打包优化。打包后的文件体积会小很多，

14.在指令文件下创建组件、模块等

        tips：先使用cd进入指定的文件，如果无效，可用ng  v  查看angular-cli版本是否过低