Angular【起步】

蒜香拿铁2025-11-03 12:21

安装脚手架工具 `Angular CLI`

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

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

bash 复制代码

npm i -g @angular/cli

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

shell 复制代码

ng --version

shell 复制代码

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

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

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

shell 复制代码

ng serve
# 或者 npm start

注意：

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

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

javascript 复制代码

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

你会发现浏览器随之刷新

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

css 复制代码

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

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