angular 创建开发环境构建项目

柔情只为你懂 2022-05-28 04:42 249阅读 0赞

### 一.安装Node.js ###

官方网址：https://nodejs.org/en/download/

*  1
 *  2

*  在命令行中输入：node -v 和 npm -v 验证版本

--------------------

### 二.全局安装Angular CLI 脚手架工具 ###

*  使用npm命令安装

npm install -g @angular/cli

*  1

*  安装cnpm
    
    国内直接装经常会出问题，所以设置为淘宝镜像地址会更好。

npm install -g cnpm --registry=https://registry.npm.taobao.org

*  1

*  安装angular/cli失败的方法

npm uninstall -g @angular/cli //卸载angular/cli /

*  1

npm cache clean  //清除缓存

*  1

cnpm install -g @angular/cli //重新安装

*  1

*  检测 Angular CLI 是否安装成功

ng -v  //查看版本能否正常显示

*  1

--------------------

### 三.创建项目 ###

> 先到cmd里进入项目所在的目录，用cd命令进入。

*  新建项目名

ng new angular01  //

*  1

*  进入所建目录启动服务

cd angular01

*  1

cnpm install     //安装依赖

*  1

ng serve --open  //启动服务

*  1

--------------------

### 四.项目的基本目录结构 ###

.   
├── README.md   
├── e2e   
│ ├── app.e2e-spec.ts   
│ ├── app.po.ts   
│ └── tsconfig.e2e.json   
├── karma.conf.js   
├── package.json   
├── protractor.conf.js   
├── src //主目录   
│ ├── app   
│ │ ├── app.component.css   
│ │ ├── app.component.html   
│ │ ├── app.component.spec.ts   
│ │ ├── app.component.ts //组件   
│ │ └── app.module.ts //根模块   
│ ├── assets   
│ ├── environments   
│ │ ├── environment.prod.ts   
│ │ └── environment.ts   
│ ├── favicon.ico   
│ ├── index.html   
│ ├── main.ts   
│ ├── polyfills.ts   
│ ├── styles.css   
│ ├── test.ts   
│ ├── tsconfig.app.json   
│ ├── tsconfig.spec.json   
│ └── typings.d.ts   
├── tsconfig.json   
└── tslint.json

--------------------

### 五.补充命令 ###

Angualr CLI提供了许多常用命令供我们选择：

ng generate class my-new-class              // 新建 class
    ng generate component my-new-component      // 新建组件
    ng generate directive my-new-directive      // 新建指令
    ng generate enum my-new-enum                // 新建枚举
    ng generate module my-new-module            // 新建模块
    ng generate pipe my-new-pipe                // 新建管道
    ng generate service my-new-service          // 新建服务

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7

ng g cl my-new-class        // 新建 class
    ng g c my-new-component     // 新建组件
    ng g d my-new-directive     // 新建指令
    ng g e my-new-enum          // 新建枚举
    ng g m my-new-module        // 新建模块
    ng g p my-new-pipe          // 新建管道
    ng g s my-new-service       // 新建服务