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

本文将介绍如何在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://pan.baidu.com/s/1y9Rv-3xcuxd9v-ZkASePsg 

提取码：9jg1 
 

1.2 安装Node.js环境

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

 

1.3 验证是否安装成功

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

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

 

1.4 配置环境变量

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

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

1.4.1 找到Node的安装目录下，创建目录：node_cache文件夹和 node_global文件夹 

1.4.2 在控制台上设置

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

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

 

1.4.3 设置环境变量

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

进入环境变量对话框后，

① 【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，

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

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

 

1.4.4 验证环境变量是否生效

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

 

二、 用VSCode运行Angular项目

2.1 安装VSCode

从官网下载安装包

https://code.visualstudio.com/Download

从百度网盘下载

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

提取码：jidh 
 

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

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

用命令安装Angular脚手架

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

 

2.3 新建Angular项目

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

# 新建Angular项目
ng new ng-sample

输入y

向下键控制，选择scss

 

2.4 运行项目

2.4.1 进入创建的项目目录

# 进入项目目录
cd ng-sample

2.4.2 启动项目

# 启动项目
ng serve

2.4.3 访问网站

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