当前位置: 首页 > news >正文

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

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

文章目录

  • 下载Node.js
    • 环境配置
    • 配置环境变量
  • 安装 cnpm(我需要安装)
  • 安装脚手架
  • 安装依赖
  • 安装淘宝镜像(注意会更新)
  • cnpm vs npm 与新旧版本核心差异
    • 包管理器不同
    • 功能差异
    • 如何选择?
    • 常见问题
    • 包管理工具的区别


下载Node.js

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

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

我是一开始下载的 node

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

在这里插入图片描述
下载好后双击即可安装,选择安装路径后可以一直傻瓜式点击下一步

环境配置

找到安装目录,在安装目录下新建两个文件夹node_globalnode_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(我需要安装)

cnpmnpm速度更快

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

在这里插入图片描述
cnpm -v:查看是否安装成功
请添加图片描述

安装脚手架

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

第一种(旧版):国内镜像

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 -gnpm 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 installcnpm淘宝定制的 npm 客户端,默认使用国内镜像(https://registry.npmmirror.com),下载速度更快,但依赖安装方式与 npm 略有不同(如目录结构、符号链接等)。
npm installnpm官方 Node.js 包管理工具,默认使用官方源(https://registry.npmjs.org),国内直接访问可能较慢,需配置镜像提速。


http://www.mrgr.cn/news/97439.html

相关文章:

  • Opencv计算机视觉编程攻略-第十节 估算图像之间的投影关系
  • Linux服务宕机,java服务导致的内存溢出
  • Uni-app入门到精通:uni-app的基础组件
  • 量子纠错码实战:从Shor码到表面码
  • k8s的StorageClass存储类和pv、pvc、provisioner、物理存储的链路
  • WebRTC技术简介及应用场景
  • 蓝桥杯 web 展开你的扇子(css3)
  • 通过ansible+docker-compose快速安装一主两从redis+三sentinel
  • Gateway 网关 快速开始
  • verilog学习--1、语言要素
  • 【大模型深度学习】如何估算大模型需要的显存
  • C# 与 相机连接
  • 使用python-pptx操作PowerPoint文档详解
  • Django接入 免费的 AI 大模型——讯飞星火(2025年4月最新!!!)
  • 十、C++速通秘籍—多进程
  • Java八股文-List集合
  • 量子计算入门:Qiskit实战量子门电路设计
  • 【QT】QT的多界面跳转以及界面之间传递参数
  • 【stm32--HAL库DMA+USART+空闲中断不定长收发数据】
  • py文件打包为exe可执行文件,涉及mysql连接失败以及找不到json文件