目录
一、实验
1.环境
2.安装Node.js
3.初始化前端项目
二、问题
1.cnpm安装报错
2.如何删除cnpm与指定cnpm版本
3.前端项目运行报错
4.node版本与npm版本对应关系如何查询
一、实验
1.环境
（1）主机
表1 主机
| 系统 | 软件 | 版本 | 备注 |
| Windows11 | VS Code | 1.92.2 | |
| Node.js | v18.20.4(LTS) |
运行（输入cmd）
查看VS Code版本
Code --version
2.安装Node.js
（1）查看
https://nodejs.org/zh-cn/download/prebuilt-installer
（2）选择一个LTS版本
这里选择v18.20.4(LTS)
下载完成：
（3）安装
下一步Next
选择安装目录
下一步Next
下一步Next
安装Install
安装中
完成
(4) 运行（输入cmd）
WIN + R 快捷键，输入cmd
(5) 验证版本
node -v
npm -v
3.初始化前端项目
(1) Windows安装cnpm (需要设置好指定镜像)
npm install cnpm -g
（2）查看cnpm版本
cnpm -v
（3）初始化安装vue
cnpm init vue@latest默认依次按回车键
（4）安装依赖
切换目录
cd vue-project
这里切换cnpm安装依赖
cnpm install
（5）运行
npm run dev
弹出界面：
可以访问到Vue
http://localhost:5173/
（6）退出
CTRL + C 结束
输入Y
（7）返回桌面
cd ..
cd Desktop
(8)安装vite
cnpm create vite@latest输入y，然后选择vue
接下来选择JavaScript
完成
（9）安装依赖
切换目录
cd vite-project
这里切换cnpm安装依赖
cnpm install
（10）运行
npm run dev
弹出界面：
可以访问到Vite + Vue
http://localhost:5173/
（11）退出
CTRL + C 结束
输入Y
(12) 桌面右键使用VSCode打开
vite-project
打开
（13）VScode查看
（14）VSCode安装vue插件
搜索vue
安装
(15) VSCode安装html插件
搜索html
安装
(16) VSCode安装javascript插件
搜索javascript
安装
（17）修改主页
点击index.html
查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
修改title
<title>Start 前端项目</title>
(18) VSCode终端进入目录
运行
npm run dev
按住CTRL键点击地址
http://localhost:5173/title标题显示已更新
（19）退出
CTRL + C 结束，输入Y
二、问题
1.cnpm安装报错
（1）报错
npm error code ETIMEDOUT
npm error syscall connect
npm error errno ETIMEDOUT
npm error network request to https://registry.npmjs.org/cnpm failed, reason: connect ETIMEDOUT 2606:4700::6810:1a22:443
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly. See: 'npm help config'
（2）原因分析
需要设置镜像
（3）解决方法
查阅
https://developer.aliyun.com/mirror/NPM?spm=a2c6h.13651102.0.0.30da1b119HVBFE设置镜像
1）旧
npm config set registry https://registry.npm.taobao.org
2）新
npm config set registry https://registry.npmmirror.com
查看镜像使用状态
npm config get registry
成功：
2.如何删除cnpm与指定cnpm版本
(1)命令
npm uninstall cnpm -g
npm install cnpm@6 -g
3.前端项目运行报错
（1）报错
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ npm run dev
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
(2)原因分析
系统环境变量已存在
需要其他授权
（3）解决方法
方法一：
以管理员身份运行（推荐）
右击vscode，选择“以管理员身份运行”，即可解决问题。
方法二：
用户变量下，新建用户变量。变量值写node.js的安装路径即可
npm的全局模块的存放路径以及cache的路径及增加环境变量
在node.js下建立node_global和node_cahce文件夹
cmd窗口输入：
1）设置了全局变量
例如：npm config set prefix “创建文件的地址”
npm config set prefix D:\nodejs\node_global
2）设置了缓存
例如：npm config set cache “创建文件的地址”
npm config set cache D:\nodejs\node_cahce
新增系统Path变量
如果环境变量配好的话，仍然报错，那就以管理员的身份启动vscode，然后再次尝试。
4.node版本与npm版本对应关系如何查询
（1）查询
https://nodejs.org/zh-cn/about/previous-releases（2）发布计划
（3）对应关系
![BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin](https://i-blog.csdnimg.cn/direct/ed45c0efd0ac40c68b2c1bc7b6d90ebc.png)
