Angular 搭建本地开发环境,并在VSCode运行第一个Angular项目
① 【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】,原文链接:https://blog.csdn.net/qq_34416331/article/details/102942501。②将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】express【-g】 全局安
本文将介绍如何在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:\nodejs\node_global\node_modules】,
② 将【用户变量】下的【Path】修改为【D:\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
# 停止项目
控制台快捷键:ctrl+C
打包发布项目
ng build
2.4.3 访问网站
打开浏览器,输入 http://localhost:4200/
error:0308010C:digital envelope routines::unsupported的几种方法
二、原因分析
主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制,nodeJs v17 之前版本没影响,但 V17 和之后版本会出现这个错误。
三、解决方案
**方案1:**打开IDEA 终端,直接输入
# Linux & Mac OS:
export NODE_OPTIONS=--openssl-legacy-provider
# Windows:
set NODE_OPTIONS=--openssl-legacy-provider
1
2
3
4
5
**方案2:**打开IDEA 终端,直接输入(问题解决)
$env:NODE_OPTIONS="--openssl-legacy-provider"
1
**方案3:**卸载当前版本,安装合适的版本(node.js)
**方案4:**解决方式(仅限 windows):
在项目中 package.json 的 scripts 中新增 SET NODE_OPTIONS=–openssl-legacy-provider
添加前:
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build"
},
1
2
3
4
5
6
添加后:
"scripts": {
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},
1
2
3
4
————————————————
原文链接:https://blog.csdn.net/qq_34416331/article/details/102942501
更多推荐




所有评论(0)