使用AngularCLI快速构建Web前端项目

### 使用 Angular CLI 构建 Web 前端项目

#### 常用命令介绍
- `npm install --save 包名`：安装生产依赖包。
- `npm install --save-dev 包名`：安装开发依赖包。
- `ng new 项目名`：创建一个新的 Angular 项目。
- `ng build --prod`：为生产环境编译项目。
- `ng serve`：启动开发服务器。
- `ng new 项目名 --skip-install` 或 `ng new 项目名 -si`：创建项目时不自动安装依赖。
- `ng new 项目名 -si --style=scss`：创建项目并设置样式表格式为 SCSS。
- `ng generate module 模块名`：生成一个新的模块。
- `ng generate component 组件名 --spec=false`：生成一个没有单元测试文件的组件。

#### 准备工作
确保已安装 Angular CLI。如果未安装，请参考相关教程完成安装。

#### 步骤 1：创建项目文件夹
创建一个专门用于存放 Angular 项目的文件夹。

#### 步骤 2：打开命令行工具
进入刚才创建的文件夹，打开命令行工具。

#### 步骤 3：创建新项目
运行 `ng new 项目名称` 命令来创建新项目。建议项目名称使用纯英文。

#### 步骤 4：检查项目结构
进入项目文件夹，检查项目是否成功创建。

#### 步骤 5：编辑项目文件
使用文本编辑器打开 `src` 文件夹下的 `index.html` 文件，了解其基本结构。

#### 步骤 6：运行项目
- 进入项目根目录。
- 运行 `ng serve` 启动开发服务器。
- 在浏览器中访问 `http://localhost:4200/` 查看应用。

#### 步骤 7：创建第一个组件
- 使用 `ng generate component 组件名称` 命令创建组件。
- 例如，创建一个 `` 组件：`ng generate component hello-world`。

#### 步骤 8：理解组件结构
- 查看组件的 TypeScript 文件，了解 `@Component` 注解及其属性。
- 理解 `selector`、`templateUrl` 和 `styleUrls` 属性的作用。

#### 步骤 9：使用组件
- 将组件标签 `` 添加到 `src/app/app.component.html` 文件中。
- 保存文件并刷新浏览器，查看组件效果。

通过以上步骤，您可以快速使用 Angular CLI 搭建并运行一个简单的 Angular 应用。