Angular 搭建本地开发环境，并在VSCode运行第一个Angular项目

喜欢ヅ旅行 2023-05-29 15:23 467阅读 0赞

本文将介绍如何在window环境Angular环境，并在VSCode上创建第一个Angular项目，并运行起来。

> 一、 部署 Node.js 安装环境
> 
> 1.1 下载Node.js安装包
> 
> 1.2 安装Node.js环境
> 
> 1.3 验证是否安装成功
> 
> 1.4 配置环境变量
> 
> 二、 用VSCode运行Angular项目
> 
> 2.1 安装VSCode
> 
> 2.2 打开VSCode终端，安装Angular脚手架
> 
> 2.3 新建Angular项目
> 
> 2.4 运行项目

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

## 一、 **部署 Node.js 安装环境** ##

### **1.1 下载Node.js安装包** ###

从官网下载安装包：

[https://nodejs.org/en/download/][https_nodejs.org_en_download]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

从百度网盘下载：

链接：https://pan.baidu.com/s/1y9Rv-3xcuxd9v-ZkASePsg

提取码：9jg1

### **1.2 安装Node.js环境** ###

双击安装包，一直Next直到结束

![format_png][]

![format_png 1][]

### **1.3 验证是否安装成功** ###

在键盘按下【win+R】键，输入cmd，回车，打开控制台窗口。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1][]

# 查看node.js版本号
    node -v
    # 查看npm版本号
    npm -v

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2][]

### **1.4 配置环境变量** ###

配置环境变量主要是修改npm安装的全局模块的所在路径和缓存cache的路径。通过配置npm全局安装路径，在执行npm install

express【-g】 全局安装时，会将要安装的模块安装到配置好的路径中，避免占用C盘空间。

**1.4.1 找到Node的安装目录下，创建目录：node\_cache文件夹和 node\_global文件夹**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 3][]

**1.4.2 在控制台上设置**

右侧路径为上面的文件夹路径

npm config set prefix "D:\nodejs\node_global"
    npm config set cache "D:\nodejs\node_cache"

**1.4.3 设置环境变量**

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 4][]

进入环境变量对话框后，

① 【系统变量】下新建【NODE\_PATH】，输入【D:\\Develop\\nodejs\\node\_global\\node\_modules】，

②   将【用户变量】下的【Path】修改为【D:\\Develop\\nodejs\\node\_global】

其中的地址为Node.js的实际安装路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 6][]

**1.4.4 验证环境变量是否生效**

# 安装express模块，查看安装位置是否是全局变量配置的路径
    npm install express -g     # -g是全局安装的意思

## 二、 **用VSCode运行Angular项目** ##

### **2.1 安装VSCode** ###

从官网下载安装包

[https://code.visualstudio.com/Download][https_code.visualstudio.com_Download]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 7][]

从百度网盘下载

链接：https://pan.baidu.com/s/1J85J0NjTe5XRcjrN2KHvuA

提取码：jidh

### **2.2 打开VSCode终端，安装Angular脚手架** ###

打开VSCode软件后，用快捷键【shift + ctrl + Y】调出调试控制台，点击终端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 8][]

用命令安装Angular脚手架

# 安装angular脚手架
    npm install -g @angular/cli

![20191108222921836.png][]

### **2.3 新建Angular项目** ###

进入要安装项目的目录，如：

![20191108224349917.png][]

# 新建Angular项目
    ng new ng-sample

输入y

![20191108224452821.png][]

向下键控制，选择scss

![20191108224526654.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 9][]

### **2.4 运行项目** ###

**2.4.1 进入创建的项目目录**

# 进入项目目录
    cd ng-sample

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 10][]

**2.4.2 启动项目**

# 启动项目
    ng serve

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 11][]

**2.4.3 访问网站**

打开浏览器，输入 http://localhost:4200/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 12][]

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191108204601426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY3NTg5LTEzMWFmOTVlZTZlYmM4MTEucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY3NTg5LWFkY2E0YmFhN2YwZDcxOTAucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019110820535612.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191108205458643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019110821255328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191108213208329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191108214008497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191108214143754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[https_code.visualstudio.com_Download]: https://code.visualstudio.com/Download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191108221522437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191108222744436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[20191108222921836.png]: https://img-blog.csdnimg.cn/20191108222921836.png
[20191108224349917.png]: https://img-blog.csdnimg.cn/20191108224349917.png
[20191108224452821.png]: https://img-blog.csdnimg.cn/20191108224452821.png
[20191108224526654.png]: https://img-blog.csdnimg.cn/20191108224526654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2019110822490536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191108225131745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191108225429750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2019110822561071.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70