本章讲解如何用CLI 创建Angular工程，创建的工程包含哪些文件以及这些文件的作用。

正常情况下创建一个项目：

1. 用PowerShell 或 运行CMD 定位到你想存放项目的文件夹
2. 执行命令：ng new pinduoduo （pinduoduo是项目名）
3. 命令开始执行时，第一个问题是：是否添加路由？这边选否
4. 第二个问题：选用哪个样式？ 这边选SCSS
5. 此时项目就开始创建，先是创建了一堆基础架构文件；然后开始下载依赖包，下载依赖包这个操作一般需要花费点时间
6. 项目创建完之后文件夹中出现一个以项目名命名的文件夹

• • image.png

快速创建项目

从上面第5点可以看出，正常创建一个项目，在安装依赖包这一步会需要很长时间。但是我想先快速创建一个项目，那么我们就可以用如下命令，可直接跳过安装这个步骤，直接创建项目文件，这个过程大概几秒即可完成。

ng new pinduoduo --skip-install --style css --routing false

此时可用VsCode打开项目，并执行以下命令安装依赖包

npm install

或

cnpm install

安装完依赖包后，项目会出现一个叫node_modules 文件夹，这个文件夹就是用来存放所有依赖包的。

查看命令帮助

ng new 究竟支持哪些参数呢？在不确定的情况下，用--help命令，可查看。

ng new --help

如下,每个参数下面都有详细的解释

• • image.png

类似的，ng 支持哪些子命令呢，也可以用--help来查看

ng --help

如下：

• • image.png

我们在开发过程中，最常用的两个命令：

ng serve

ng build

ng serve 启动脚手架服务，启动开发环境，默认端口是4200.
如果想改变启动端口如下：

ng serve --port 4300

如果想启动时，直接在浏览器中打开，不需要再手动去浏览器中输入，那执行如下命令

ng serve --port 4300 -o      
ng serve -o

项目结构和文件内容详解

• e2e
  e2e是End to End Testing （端到端测试）。ng e2e 编译并启动angular项目，然后使用Protractor运行端到端测试

• node_modules
  angular项目依赖包存放目录，执行npm install / cnpm install 时会自动创建此目录。

• src
  angular源码文件夹
  -.editorconfig
  在不同的代码编辑器中，维持相同的代码风格。看似不起眼的配置，其实用处非常大。比如我用VsCode，另一个同事用Sublime，我们想在看和编辑时都能保持代码风格一致，如：代码缩进2个空格。 就会用到这个配置文件了。

• .gitignore
  这个是我们在git中想忽略某些文件，比如我们在提交angular代码时，要忽略掉node_modules、dist等文件夹。这是Angular CLI 默认帮我们创建的gitignore文件，是比较全面的。当然如果你自己添加了测试文件在本地，又不想提交，那么也可以配置到这个ignore列表中。

• angular.json
  这个是Angular项目的定义文件。

  • $schema
    Json Schema 是一个允许我们注解和验证JSON数据格式的工具，Angular CLI使用它来强化对于Angular Workspace schema的解释说明
  • projects 部分
    这是Angular工作空间中所有项目的配置信息。如：
    - root 指定了项目文件的根文件夹，可能为空，但它指定了一个特定的文件夹
    - sourceRoot 指定项目源文件位置
    - prefix 当CLI创建component 或者directive时，加前缀
    - architect 定义自动化命令，如build，输出地址，资源文件地址等的配置
    - defaultProject 指定默认项目，当使用CLI 命令时，会显示 defaultProject名字

• browserslist
  维持浏览器兼容性的一个文件。比如>0.5% 只支持市场占有大于0.5%的浏览器，小于就不支持；not IE 9-11，就是不支持IE 9-11 版本等等

• karma.conf.js
  单元测试的配置文件，使用Angular + Karma + Jasmine可以进行前端的单体测试

• package.json
  任何一个NPM 软件包都会有的一个约束文件，主要为以下几部分：
  - name
  - version
  - scripts
  1. scripts 属性是一个包含包运行时生命周期各个环节需要执行的脚本命令，key就是生命周期时间，value是运行时节点执行的命令
  - dependencies
  - devDependencies

  1. dependencies 和 devDependencies 有些区别，前者是导入引用的包，而后者是开发的时候需要用到，运行时并不需要的包。比如Typescript，在开发时是需要的，编译会把typescript编译成Javascript。所以，在添加直接引用的时候，命令行如：npm i --save @angular/core。如果要添加开发依赖包，命令行如：npm i --save-dev @types/node
  2. 依赖包的版本，三位数分别是”大版本号“."小版本号"."补丁版本号"。
  3. 版本号前面还会出现 ”~“ 或者 ”^{“，”~“代表至少保证版本号的前两位是一样的，至于补丁版本号可随意，每次安装时一般安装最新的补丁版本号。”}“ 是锁定大版本号，后两位版本号安装时也是安装最新版本号。那如果版本号前面什么都没有，那就表示严格安装指定版本

• package-lock.json
  锁定直接依赖包中的每一个依赖包的各自依赖包，在换pc 或新的下载源时，按package-lock.json中的指定版本下载

• README.md
  Markdown格式的文档,对项目的简介

• tsconfig.json

• tsconfig.app.json

• tsconfig.spec.json

  1. tsconfig这三个文件都是对typescript的配置文件。比如typescript最终要编译成Javascript，那需要指定编译的目标格式，路径等
  2. tsconfig.json 是全局性的Typescript的配置，tsconfig.app.json和tsconfig.spec.json 都继承自tsconfig.json。
  3. tsconfig.app.json 是针对项目开发时的配置
  4. tsconfig.spec.json是针对项目测试的配置

• tslint.json

  1. tslint.json 是用来做静态代码扫描的，一般在代码编译时会检查代码格式，或不符合最佳实践的会扫描出来，所以这个文件是用来定义规则的。
  2. 比如quotemark 要求是单引号，typescript是支持单引号或双引号的，但是如果指定了单引号，而写双引号，那么就会有绿色的波浪线表明格式不对。虽然编译不会出错，但不符合代码格式要求
  3. 可以使用ng lint对整个代码进行扫描，可输出哪些代码不符合规范
     
     image.png