Node.js安装&Vue3安装&常见问题

前言

前端初学者注意：node.js(v18以上) 先安装后才能安装vue3，node.js在安装时会自动安装npm

Node.js安装

安装包已上传CSDN,审核中 ， 也可以nodejs官网下载

默认C盘，本人下载路径改在：D:\Program Files\npm\v20
（安装过程除了接受条款，其他不要打钩√，最快最高效）

下载完成后创建文件夹：
D:\Program Files\npm\v20\node_global
和D:\Program Files\npm\v20\node_global

初始界面搜索框打开cmd(win+R) 依次输入命令：

npm config set prefix "D:\Program Files\npm\v20\node_global"

npm config set cache "D:\Program Files\npm\v20\node_cache"

设置Node.js系统变量

1.新建系统变量 ： NODE_PATH

2.【重要修改】用户环境变量Path：C:\Users\Username\AppData\Roaming\npm
改为： D:\Program Files\npm\v20\node_global

3.在系统变量Path中添加： %NODE_PATH%

4.测试是否安装成功：npm install express -g

若失败如图所示:

解决方法：

1 . 点击v20文件夹右键属性 对Authenticated Users的权限修改，全部打钩√

2 . 打开cmd输入 npm cache clean --force (清空缓存)

会出现 npm WARN using --force Recommended protections disabled. 表示缓存清除

3 . 再次测试命令全局安装 npm install express -g

若成功则出现：

更多细节详情

再次检查缓存(这里是有问题的，没有显示路径，但Vue3可以成功安装)

Vue3安装

Node.js 成功安装后 输入官网命令

1.先自己新建项目文件夹(my名称demo)，在路径输入cmd打开后输入

npm create vue@latest

加载依赖包 :

cd demo   (注意在demo目录下执行)
npm install   (出现读条，等待)

测试运行：

npm run dev  
或cnpm run dev   (淘宝镜像)

输入对应的网址http://localhost:5173/
若出现Vite APP则成功

Question：vue不是内部或外部命令，也不是可运行的程序

无法在终端执行vue的指令(vue不是内部或外部命令，也不是可运行的程序)

解决办法：

①若安装完Node.js目录下存在vue.cmd：

配置路径：把vue.cmd的路径添加系统环境变量中

② Node.js目录下没有vue.cmd文件

1. 配置路径： D:\Program Files\npm\v20\node_cache (之前已经创建跳过此步)

2. npm install -g cnpm

3. npm i npm -g npm i @vue/cli -g

4. cnpm i @vue/cli -g

测试：

$若有其他异常，欢迎大家在评论区讨论$

参考1      ~~~~     参考2