Skip to content

下载脚手架:

bash
npm install -g @angular/cli
或者 cnpm install -g @angular/cli
或者 yarn global add @angular/cli

1.加速创建项目

bash
ng new my-app

创建项目的时候,只要文件创建完毕,就可以 ctrl+c 结束,然后进入文件夹使用 cnpm i 下载依赖

否则创建项目的 npm 下载阶段会非常慢!

image-20230911224616192

注意:如果写成 ng new my-app --skip-install,这样就只会创建文件,但是不会安装依赖

bash
ng new my-app --skip-install


更高级更好的写法,在命令行运行如下命令:
ng new micro-base --skipTests=true  --style=less --prefix=iview --skip-install

--style=less 用于样式文件的文件扩展名或预处理器。
--skipTests=true 如果为true,则不会为新项目生成"spec.ts"测试文件。
--prefix iview 适用于初始项目的生成选择器的前缀。
--skip-install 暂时不下载依赖,我们自行npm i下载

2.安装脚手架的时候千万不要用 cnpm 安装

否则创建项目的时候可能会报错 setTimeout is not defined,这个错误很难排查!

必须使用 npm install -g @angular/cli 安装

3.启动项目

bash
ng serve --open #简写为-o也可以

或者 npm

bash
npm start

4.脚手架说明

Angular CLI(Command Line Interface)是用于开发、构建和维护 Angular 应用程序的工具。它是一个基于命令行的工具,提供了一系列命令和脚手架,简化了 Angular 应用程序的开发流程。

Angular CLI 默认使用 Webpack 作为构建工具。Webpack 是一个现代的 JavaScript 模块打包工具,它可以处理多种类型的文件,包括 JavaScript、CSS、HTML 以及各种资源文件,然后将它们打包成一个或多个最终的优化的 bundle。Webpack 提供了模块化的开发方式,使得开发者可以更好地组织和管理代码。

当你使用 Angular CLI 创建新的 Angular 项目时,它会默认集成 Webpack 并配置好常用的开发环境,包括热模块替换(HMR)、代码分割(Code Splitting)、源代码映射(Source Maps)等,以及为生产环境构建优化的配置。

总的来说,Angular CLI 默认使用 Webpack 作为构建工具,这使得开发 Angular 应用变得更加高效、便捷,并且可以充分利用 Webpack 的优势来优化应用的构建和性能。