安装脚手架工具 Angular CLI

Angular CLI 是 Angular 官方开发的一个类似于 Vue CLI 的脚手架开发工具，它帮我们集成了 webpack 打包、开发服务器、单元测试、自动编译、部署等功能特性。

使用它的第一步就是先安装：

npm i -g @angular/cli

安装结束之后我们可以通过在命令行输入以下命令测试是否安装成功：

ng --version

使用脚手架工具初始化项目

ng new my-app #根据脚手架引导创建项目

请特别注意：Angular CLI 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，可能会下载失败，请自己手动 Ctrl + C 终止掉，然后进入初始化好的项目根目录使用 npm 来安装，最好切换成淘宝镜像。

启动项目

使用脚手架工具初始化项目完成之后，我们就可以启动开发模式了：

ng serve
# 或者 npm start

注意：

1. 在项目根目录下执行
2. 看好是 serve 不是 server
3. 该命令默认会开启一个服务占用 4200 端口，如果想要修改可以通过 --port 参数来指定，例如 ng serve --port 3000

接下来我们打开浏览器，访问：http://localhost:4200/

体验 Angular

找到 ./src/app/app.component.ts 文件，将 AppComponent 组件类中的 title 修改如下（记得保存哦）：

export class AppComponent {
  title = '你的第一个 Angular 应用';
}

你会发现浏览器随之刷新

标题样式太丑了，来让我们打开 src/app/app.component.css 文件并写入以下内容：

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

是不是很酷！😂😂😂😂😂😂