Bootstrap

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

前言

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

NVM

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

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网站更新了,重新整了一下,好像只能选择版本,不能指定版本了

在这个download里选择相应的版本下载
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

安装成功后查看是选择的版本

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输入创建项目命令就可以成功了

在这里插入图片描述

;