下载安装Node.js及其他环境

提示：从Node版本降级到Vue项目运行

---

下载Node.js

Node是 JavaScript 的运行时环境。同比tomcat，Node 为 JS 提供了更强大的操作方式

npm 是 node 提供的一个包管理工具，类似于 maven。通过 npm 去安装依赖包，就不需要在页面上使用 script 标签引入了。 前端也有依赖

我是一开始下载的 node

进官网下载安装包https://nodejs.cn/download/

下载好后双击即可安装，选择安装路径后可以一直傻瓜式点击下一步

环境配置

找到安装目录，在安装目录下新建两个文件夹node_global、node_cache

创建完毕后，使用管理员身份打开 cmd 命令窗口

输入：
npm config set prefix “本地node_global文件夹路径”（复制刚刚创建的node_global文件夹路径）

npm config set prefix "D:\node18\node_global"

npm config set cache “本地node_cache文件夹路径”（复制刚刚创建的node_cache文件夹路径）

npm config set prefix "D:\node18\node_cache"

配置环境变量

右键【此电脑】→【属性】→【高级系统设置】→【环境变量】

在【系统变量】中点击【新建】

变量名：NODE_PATH
变量值：node_modules 路径

在【系统变量】中选择【Path】点击【编辑】添加%NODE_PATH%和node_global文件路径，随后一直点击【确定】

在cmd中输入：
node -v：显示 node.js 版本
npm -v：显示 npm 版本

成功显示版本说明安装成功

安装 cnpm（我需要安装）

cnpm比npm速度更快

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm -v：查看是否安装成功

安装脚手架

vue脚手架指的是 vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松创建新的应用程序而且可用于自动生成 vue 和 webpack,的项目模板。

第一种（旧版）：国内镜像

cnpm install vue-cli -g

如果已安装 cnpm，也可以通过以下命令安装新版 CLI：

cnpm install -g @vue/cli

vue -V查看vue-cli脚手架是否安装成功，出现版本号就安装成功了

第二种（新版推荐）：需手动配置镜像提速

可先配置淘宝镜像加速：

npm config set registry https://registry.npmmirror.com

然后再执行安装命令。

npm install -g @vue/cli

安装依赖

npm install

或者

cnpm install

安装淘宝镜像（注意会更新）

由于国内直接使用 npm 的镜像是国外的，非常缓慢，建议切换成淘宝镜像。

https://www.npmmirror.com/

npm config set registry https://registry.npmmirror.com

查看是否成功

npm config get registry

cnpm vs npm 与新旧版本核心差异

cnpm install vue-cli -g 和 npm install -g @vue/cli 的主要区别在于 包的名称和版本，以及使用的包管理器。以下是详细对比：

包管理器不同

• cnpm
  是淘宝镜像提供的 npm 客户端，国内下载速度更快，但可能偶尔存在版本同步延迟问题。

• npm
  是 Node.js 官方的包管理器，直接连接 npm 官方仓库，版本更新更及时。

功能差异

特性	vue-cli (2.x)	@vue/cli (3.x+)
项目初始化命令	vue init <template> <name>	vue create <name>
配置方式	依赖 webpack 配置文件	基于 vue.config.js 配置
插件系统	不支持	支持插件扩展
图形界面	无	提供 vue ui 可视化工具

如何选择？

• 推荐使用 npm install -g @vue/cli
  这是 Vue 官方当前维护的版本，功能更强大且持续更新。

• 如果需要旧版（如维护遗留项目）:
  使用 npm install -g vue-cli（但官方已不再维护）。

常见问题

• 同时安装了两个版本怎么办？
  建议卸载旧版：

npm uninstall -g vue-cli
npm install -g @vue/cli

• 国内安装慢怎么办？
  可以用 cnpm 安装新版：

cnpm install -g @vue/cli

包管理工具的区别

命令	工具	特点
cnpm install	cnpm	淘宝定制的 npm 客户端，默认使用国内镜像（https://registry.npmmirror.com），下载速度更快，但依赖安装方式与 npm 略有不同（如目录结构、符号链接等）。
npm install	npm	官方 Node.js 包管理工具，默认使用官方源（https://registry.npmjs.org），国内直接访问可能较慢，需配置镜像提速。

---