node.js、vue-cli安装及配置

前言

因为需要创建一个新的项目，所以花了一个上午检查安装和配置，记录一下这期间遇到的一些报错问题

NVM

写这前面，趁着还没安装node，不需要配置环境，也不需要再卸载node，直接一步到位，方便以后node多版本切换使用管理，可以看这篇文章

• node版本管理：nvm安装及使用

Node.js

Node.js安装

官方地址：https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/

下载及安装步骤（旧）：

1. 根据自己电脑的配置下载相应版本
2. 下载后双击.msi 文件
3. 开始进入安装步骤选项，next
4. 同意并勾选，next
5. 默认或选择安装路径，next
6. 安装项默认第一个选项，next
7. install，开始安装

下载及安装步骤（新）：

突然发现node网站更新了，重新整了一下，好像只能选择版本，不能指定版本了

windows更新node，直接在控制面板里卸载node重新安装更新就行了，保险起见可以根据下面的node配置再检查操作一遍，可能会遇到丢失node.exe执行文件或者npm缓存的报错情况，解决方法写在后面了

查看是否安装成功

命令提示符中输入命令查看，有版本显示即安装成功

 node -v 
 npm -v

所遇问题及解决方法

1. node.exe文件丢失

& : 无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

要检查npm里有没有node.exe文件，是在C:\Users(用户)\xxxx(我的是Lenovo)\AppData\Roaming\npm这个路径里，可以直接复制nodejs安装文件夹下的node.exe文件

2. npm缓存报错

WARN logfile could not be created: Error: ENOENT: no such file or directory, open 'D:\nodejs\node_cache\_logs\2024-05-27T07_37_31_103Z-debug-0.log'

解决办法就是删除C:\Users{账户}\下的.npmrc 文件，清除npm缓存

Node.js配置

配置步骤

1.新建如下图红色框中的两个文件夹

2.命令提示符中输入命令,无报错信息即成功

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

3.环境配置

我的电脑 ——> 右击，选择“属性” ——> 找到“高级系统设置” ——> “高级” ——>“环境变量”

（1）在【系统变量】下新建【NODE_PATH】，输入【D:\nodejs\node_modules】

（2）将【用户变量】下的【Path】修改为【D:\nodejs\node_global】

4.配置完成后，测试一下全局安装

npm install express -g

提醒：如果这里报错，可以试一下以管理员身份运行

5.安装配置环境成功

vue-cli

vue-cli安装

可以查阅一下官方文档：https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli

检查安装

vue --version

所遇问题及解决方法

安装vue脚手架时报错
原因： 安装vue的版本过低
解决方法： 强制覆盖以前旧版的vue-cli脚手架

npm install -g @vue/cli --force

创建项目

创建项目步骤

1. 输入命令+项目名

vue init webpack manton-air-switch

2. 确认项

前四项直接enter，第五项Yes，第六、七、八项No，之后直接enter，开始创建项目

3. 创建成功

所遇问题及解决方法

按提示命令运行后，try again输入创建项目命令就可以成功了