npm 包 @angular/cli 使用教程

前言

@angular/cli 是一个由 Angular 团队开发的命令行工具，用于快速创建、开发和部署 Angular 应用。它可以帮助我们轻松地创建项目架构，生成组件、服务、指令等代码，进行打包和部署等操作。本文将详细介绍 @angular/cli 的使用方法，并提供示例代码，希望能够帮助大家更好地了解和学习这款工具。

安装和升级

@angular/cli 的安装和升级非常简单，只需要执行以下命令即可：

# 全局安装
npm install -g @angular/cli

# 升级到最新版本
npm update -g @angular/cli

创建项目

创建一个新的 Angular 项目非常简单，只需要在命令行中运行以下命令：

ng new my-app

其中 my-app 是项目的名称，可以根据需要修改。@angular/cli 将自动为我们创建一个基础项目架构，包含默认的文件和目录结构。 如果需要添加对应的路由和样式，可以使用下面的命令：

ng new my-app --routing --style scss

在这个命令中，我们同时指定了 --routing 和 --style scss 选项，所以项目将会启用路由支持，并使用 SCSS 样式预编译器。

添加组件

在 Angular 应用中，组件代表了视图和行为的组合。可以通过 @angular/cli 快速创建一个新的组件。

ng generate component my-component

这个命令将会生成一个 my-component 的组件及其相关文件，并自动注册到你的应用中。 你还可以使用 ng g c my-component 的简写形式来生成组件。

添加服务

Angular 中的服务是一个可重用的业务逻辑单元，可以在组件之间共享数据和行为。可以通过 @angular/cli 快速创建一个新的服务。

ng generate service my-service

这个命令将会生成一个 my-service 的服务及其相关文件，并自动注册到你的应用中。 你还可以使用 ng g s my-service 的简写形式来生成服务。

打包和部署

@angular/cli 还提供了内置的打包和部署命令，可以帮助我们将代码打包成静态文件，方便地部署到服务器。

# 打包成生产环境代码
ng build --prod

# 部署到 Firebase 服务器
ng deploy

其中，ng build --prod 将会打包成生产环境代码，包含优化、压缩和缓存等处理。 而 ng deploy 可以方便地将应用部署到 Firebase 服务器。

以上就是 @angular/cli 的使用教程，并附上了一些示例代码。希望能够帮助大家更好地学习和使用这个工具。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116507