NPM 包管理工具介绍及下载安装步骤

1.1 什么是 NPM
NPM 全称 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js (针对JavaScript作为服务端开发语言,在没有node.js之前,开发人员使用js只能开发前端页面,不能开发服务端,有了node.js就能使用js开发服务器端程序)平台的默认包管理工具。通过

NPM 可以安装、共享、分发代码,管理项目依赖关系。
可从NPM服务器下载别人编写的第三方包到本地使用。
可从NPM服务器下载并安装别人编写的命令行程序到本地使用。
可将自己编写的包或命令行程序上传到NPM服务器供别人使用。

其实我们可以把 NPM 理解为前端的 Maven。我们通过 npm 可以很方便地安装与下载 js 库,管理前端工程。
最新版本的 Node.js 已经集成了 npm 工具,所以必须首先在本机安装 Node 环境。
Node.js 官网下载地址:
英文网:https://nodejs.org/en/download/
中文网:http://nodejs.cn/download/
装完成后,查看当前 nodejs 与 npm 版本
下载步骤:
在这里插入图片描述
安装npm:
在这里插入图片描述
双击此程序
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
检查安装情况
安装完成后,在Windows环境下,命令提示符输入 npm -v 可查看当前 npm 版本,表示安装成功。
查看当前 nodejs 与 npm 版本
在这里插入图片描述
npm安装完成之后 我们来使用npm的功能
第一个功能: 初始化项目
1.2 NPM 初始化项目

npm init 命令初始化项目

新建一个 npm-demo 文件夹,通过命令提示符窗口进入到该文件夹,执行下面命令进行初始化项目

根据提示输入相关信息,如果使用默认值,则直接回车即可。
package name: 包名,其实就是项目名称,注意不能有大写字母
version: 项目版本号
description: 项目描述
keywords: {Array}关键字,便于用户搜索到我们的项目
在这里插入图片描述

最后会生成 package.json 文件,这个是包的配置文件,相当于 maven 的 pom.xml 我们之后也可以根
据需要进行修改。
在这里插入图片描述

在这里插入图片描述
以上我们初始化一个项目的时候,大部分采用的都是默认初始化值(除了description 描述项),如果您想采用全部的默认消息,就不会提升你手动输入消息 采用以下命令

npm init -y

在这里插入图片描述
第二个功能: 安装模块
比如安装js模块 vue模块等到我们的项目当中
1.3 安装方式
npm install 命令用于安装某个模块,安装方式分为 :本地安装(local)、全局安装(global)两种.

本地安装
将 JS 库安装在当前执行命令时所在目录下

#本地安装命令, 版本号可选
npm install <模块名称>[@版本号]

全局安装
将 JS 库安装到你的 全局目录 下

#全局安装命令
npm install <模块名称>[@版本号] -g

如果安装时出现如下错误:

npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解决方法,执行如下命令:

npm config set proxy null

案例:
本地安装
本地安装会将 js 库安装在当前目录下
安装最新版 express 模块,它是基于Node.js 平台的 Web 开发框架,执行如下命令:

npm install express

如果出现黄色的是警告信息,可以忽略,请放心,你已经成功安装了。
在该目录下会出现一个 node_modules 文件夹 和 package-lock.json
node_modules 文件夹用于存放下载的js库(相当于maven的本地仓库)
package-lock.json 是在 npm install 时候生成一份文件。
用以记录当前状态下实际安装的各个包的具体来源和版本号。
重新打开 package.json 文件,发现刚才下载的 jquery.js 已经添加到依赖列表中了.
在这里插入图片描述
在这里插入图片描述
关于模块版本号表示方式:

指定版本号:比如 3.5.2 ,只安装指定版本。遵循 “大版本.次要版本.小版本”的格式规定。

~ 波浪号 + 指定版本号:比如 ~3.5.2 ,安装 3.5.x 的最新版本(不低于 3.5.2),但是不安装 3.6.x,也就是说安装时不改变大版本号和次要版本号。

^ 插入号 + 指定版本号:比如 ^3.5.2 ,安装 3.x.x 的最新版本(不低于 3.5.2),但是不安装 4.x.x,也
就是说安装时不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是
因为此时处于开发阶段,即使是次要版本号变动,也可能带来 程序的不兼容。

latest :安装最新版本。

安装指定版本模块

安装 jquery 2.2.0版本的jquery

npm install jquery@2.2.0
在这里插入图片描述
在这里插入图片描述

全局安装

使用全局安装会将库安装到你的全局目录下。
查看全局安装目录
如果你不知道你的全局目录在哪里,执行命令:

npm root -g

在这里插入图片描述
全局安装
全局安装 vue 模块,执行命令

 npm install vue -g

在这里插入图片描述
查看全局目录是否存在 安装的vue模块
在这里插入图片描述

查看全局已安装模块:
在这里插入图片描述
修改默认全局安装目录,使用命令 :
比如我修改为 E:\MyDev\npm

npm config set prefix “E:\MyDev\npm”

在这里插入图片描述
再次查看全局目录
在这里插入图片描述
安装vue和jquery模块到全局目录下
在这里插入图片描述

在这里插入图片描述

查看全局已安装模块:

npm list -g

在这里插入图片描述

生产环境模块安装(安装的模块会使用在线上环境)

格式:
–save 或 -S 参数意思是把模块的版本信息保存 package.json 文件的 dependencies 字段中(生产环境依赖)

npm install <模块名称> [–save|-S]
安装某个模块 其实默认就是安装在生产环境下的

举例:
安装 vue 模块,安装在生产环境依赖中

 npm install vue -S

在这里插入图片描述
在 package.json 文件的 dependencies 字段中
在这里插入图片描述

开发环境模块安装
格式:
–save-dev 或 -D 参数是把模块版本信息保存到 package.json 文件的 devDependencies 字段中(开发环境依赖),所以开发阶段一般使用它:

npm install <模块名称> [–save-dev|-D]

举例:
安装 eslint 模块,它是语法格式校验,只在开发环境依赖中即可

npm install eslint -D

在这里插入图片描述

在 package.json 文件的 devDependencies 字段中
在这里插入图片描述
批量下载模块
我们从网上下载某些项目后,发现只有 package.json , 没有 node_modules 文件夹,这时我们需要通过命令下载这些js库。

案例:
在这里插入图片描述

在这里插入图片描述
命令提示符进入 package.json 所在目录,执行命令:

npm install

此时,npm 会自动下载 package.json 中依赖的js库.
在这里插入图片描述
查看模块命令
查看本地已安装模块方式

方式1:可以安装目录 node_modules 下的查看包是否还存在
方式2:可以使用以下命令查看:
查看本地安装的所有模块 npm list
查看指定模板 npm list <模块名称>
在这里插入图片描述

卸载模块
卸载局部模块

npm uninstall <模块名称>

在这里插入图片描述
在这里插入图片描述
卸载全局模块

npm uninstall -g <模块名称>

在这里插入图片描述
卸载了全局家的vue模块
在这里插入图片描述

配置淘宝镜像加速
查看当前使用的镜像地址

npm get registry

配置淘宝镜像地址

npm config set registry https://registry.npm.taobao.org

还原默认镜像地址

npm config set registry https://registry.npmjs.org/

在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值