目录
一、实验
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)对应关系