Nodejs安装及npm配置(超详细)

news2025/7/12 17:30:28

文章目录

  • 一、Node.js 下载
  • 二、Node.js 安装
    • node.js简单安装
  • 三、Node.js 配置
    • 配置npm源
      • 关于npm源的更新
  • 四、可能遇到的问题
    • 1. 直接输入npm 或 npm 命令出错


一、Node.js 下载

Node.js官网下载地址
在这里插入图片描述
Node.js中文下载地址
在这里插入图片描述

本文以 node.js 16.14.2 版本做演示,此版本要求操作系统为 win8以上
如操作系统为 win7,则可采用 12.18.4 版本(亲测)或者采用其它12以下版本皆可

二、Node.js 安装

node.js简单安装

下载完成后,双击运行下安装包,开始安装,一直无脑安装,一直点 next 即可,安装路径默认事在 C:\Program Files 下,当然这里也可以自定义修改安装路径,但是对于新手来讲,非常非常不建议

在这里插入图片描述

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

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

在这里插入图片描述

安装完成后,我们安装的 node.js 会自动帮助我们配置环境变量。
测试安装时候安装成功!
通过 Win + R 运行菜单,输入 cmd 打开终端窗口,执行 node -v 命令,查看node.js版本

node -v
v16.14.2

执行 npm -v 命令,查看npm版本

npm -v
8.5.0

如图所示:
在这里插入图片描述

三、Node.js 配置

npmnode.js 的包管理器(package manager)。我们在Node.js上开发时,会用到很多别人已经写好的第三方 javascript 代码,如果每当我们需要使用第三方的代码时,都上网去检索,下载,引入项目会非常的麻烦,于是就出现了 npm 包管理器

如果小伙伴们学习过 Java,可以将 npm,理解成Java中的 maven,我们使用 maven 构建项目,也是maven能够很好的帮助我们管理依赖。
当然我们在通过 maven 构建项目时,默认从国外的镜像仓库(http://repo.maven.apache.org/maven2)下载第三方依赖 ,由于带宽或传输等问题,我们一般会配置一个国内的镜像仓库方便我们使用,而我们配置 settings.xml 文件的意义也是配置国内的镜像仓库。
同理 npm也是一样的,所以我们需要给 npm包管理器 也配置一个对应的国内镜像仓库。

在这里插入图片描述

配置npm源

npm源,我们又叫npm仓库,默认是一个国外的服务器 https://www.npmjs.com/ 。
在这里插入图片描述

在国内使用时,访问速度较慢,通常我们会在第一次使用时,配置一个国内的镜像服务器,在国内我们通常使用的是 https://registry.npm.taobao.org 这个镜像仓库(2022.06.30之后建议更改,详情查看下面 关于npm源的更新)。当然这里也可以使用其他的国内镜像仓库:https://registry.npmmirror.com

关于npm源的更新

原淘宝 npm 域名即将停止解析,正如在《淘宝 NPM 镜像站喊你切换新域名啦》 中预告的那样:htt p://npm.taobao.orghttps://registry.npm.taobao.org 将在 2022.06.30 号正式下线和停止 DNS 解析。
域名切换规则:
http://npm.taobao.org => http://npmmirror.com
https://registry.npm.taobao.org => https://registry.npmmirror.com

  • 配置/设置npm镜像仓库指令
    npm config set registry https://registry.npmmirror.com
    
  • 查看npm镜像仓库配置是否成功(显示当前的镜像网址)
    npm config get registry
    

在这里插入图片描述

效果如上图所示效果,既配置国内镜像源成功,这里是以 https://registry.npmmirror.com 这个镜像仓库进行演示,如果配置的是其他国内镜像源,则测试时显示的为其他镜像仓库

注意:无论你使用哪种操作系统,必须保证当前登录的用户具有最高访问权限,例如,在 Windows 操作系统中,请使用管理员模式的命令提示符,在 Mac OS 中,请使用 sudo 来执行以上命令。

四、可能遇到的问题

1. 直接输入npm 或 npm 命令出错

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405523.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue如何请求后端数据

在vue中,我们如何通过请求接口来访问后端的数据呢?在这里简单总结了一个小示例: 主要问题:如果不封装的话,在每次请求的时候都要书写一遍下面的代码,造成代码冗余。 1、在src目录下创建一个utils文件夹&am…

uniapp h5跳转微信小程序(wx-open-launch-weapp)

目录 一、注意事项 二、使用步骤 三、调整样式 一、注意事项 微信版本要求为:7.0.12及以上系统版本要求为:iOS 10.3及以上、Android 5.0及以上已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。…

vue项目网页自适应,等比例放大缩小

同样是,虽然标题写的vue项目适用,但其它前端框架应该也可以。其它框架我没什么经验,可以参考着看看,应该适用。 本文章不涉及第三方插件,纯js。 自适应这个问题,老早以前就有一个解决方式,css中…

前端实现vue3使用axios调用后端接口

前言:在探索vue3.0的道路上调接口这件事很重要,所以我就把我探索出来的这条道展示出来,为大家提供便利,望喜欢,废话不多说展示!!! 第一步:在src下创建一个http文件夹&am…

vue-devtools的安装与使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、vue-devtools是什么?二、vue-devtools安装1.下载vue-devtools工具2.安装vue-devtools工具三、vue-devtools的使用总结前言 主要介绍vue-devtool…

nvm详细安装步骤以及使用(window10系统)

nvm详细安装步骤以及使用 nvm是一个管理nodejs版本的工具。在实际的开发中,有些项目的开发依赖需要低版本的nodejs运行环境,此时我们就需要使用nvm来降低nodejs版本。 1.下载安装nvm,首先安装目录不要有空格和中文,会出现乱码 下…

若依框架详细使用

目录 🏳‍🌈若依是用来干什么的❓ 🚩技术支持: 🏳‍🌈如何下载❓ 🚩官网地址: 🏳‍🌈如何搭建ruoyi环境❓ 🚩若依框架的目录结构 🚩 修改配…

WKHtmltoPdf

踩过的坑 请一定要使用下面的这种方式获取系统的可执行命令,否则会报一堆的找不到目录等错误!!! String osname System.getProperty("os.name").toLowerCase();String cmd osname.contains("windows") ? …

如何运行vue项目(超详细图解)

📖本篇超级详细案例截图教学 如何运行别人的vue项目,图片点击可放大仔细看 一、查看node.js版本 Vue环境配置教程 :https://blog.csdn.net/m0_57545353/article/details/124366678 配置完成后分别在cmd中执行node -v查看是否安装成功&…

js常用的加密/解密方法

1.前言(老司机直接跳过) 为什么js需要加密 谈到加密,大多数人应用场景都在于后端接口的加密签名校验。这种一般都用于服务端与服务端之间的相互调用,避免第三方使用你的接口做违法违规的事情,这种加密校验比较安全,因为没有暴露在…

React中使用Redux (一) - 在React中直接使用Redux

React中使用Redux 开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。 尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描…

Vue3中Vuex的使用

Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。 例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我…

el-input无法输入的问题和表单验证失败问题

1.el-input无法输入的问题原因1、el-input组件没有绑定双向响应式数据(v-model)解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。原因2、组件嵌套太深还是该组件是一个坑(…

【node】升级 Node 版本教程

文章目录Window 系统Mac 或 Linux系统Window 系统 window系统升级node只能到node官网下载window安装包来覆盖之前的node。node 安装教程附下载地址:https://blog.csdn.net/qq_45677671/article/details/114535955因为 n 模块是不支持window系统: PS C:…

el-table表格动态合并行、合并行列及详解

📝 个人简介 ⭐ 个人主页:我是段段🙋‍ 🍊 博客领域:编程基础、前端💻 🍅 写作风格:干货!干货!都是干货! 🍑 精选专栏:Vue…

解决Vuex刷新页面数据丢失的问题

一:数据丢失的原因 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例&#…

Nuxt3项目搭建(Nuxt3+element-plus+scss详细步骤)

小聊: 本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置(可选),scss的安装(可选&…

HTML的基本标签及属性

HTML1. 标题与段落标签2. 文本修饰标签3. 图片标签4. 链接标签5. 无序、有序列表与定义列表6. 表格、表单标签7. div与span标签1. 标题与段落标签 (1) 标题标签是一对双标签&#xff1a;<h1></h1>&#xff0c;<h2></h2>&#xff0c;<h3></h3&…

Layui表格可编辑 可动态新增一行 删除当前行

Layui 表格 可编辑&#xff1a;点击表格实现可编辑 cols: [[ //表头 {type: numbers, title: ID, width: 80, align: "center", sort: true} , {field: project, title: 项目, minWidth: 80, align: "center", edit: text} ]] 在表头的对象中增加 edit: …

前端必学的CSS3波浪效果演示

目录 文章目录 前言 CSS3波浪效果 1.Html构建 2.CSS编写 3.完整代码 index.html文件 style.css文件 总结 前言 随着前端技术的不断发展与进步&#xff0c;界面交互的样式要求和美感也越来越高&#xff0c;很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开…