首页 > 其他分享 >vue全家桶进阶之路4:NPM包

vue全家桶进阶之路4:NPM包

时间:2023-03-24 16:47:28浏览次数:52  
标签:NPM npm vue 进阶 express install registry 模块 安装

  NPM(Node Package Manager)是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。

  NPM是 JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载,每周下载约 30 亿次。NPM让 JavaScript 开发人员可以轻松地安装、使用、共享、分发代码,管理项目依赖项目。NPM是Node.js的默认管理工具,所以在安装Node.js的时候就已经包含了NPM。

  Node.js是JavaScript运行环境,NPM是Node.js默认的包管理工具,所以安装了Node.js,NPM也就有了。

  1. 下载安装:Node.js 官网中文版:https://nodejs.org/zh-cn/
  2. 验证安装是否成功或查看版本:
    • 查看Node.js版本方法:node -v
    • 查看NPM的版本方法:npm -v
  3. 配置Node.js环境(NPM全局安装路径,可以自定义,按照默认设置也可以。)
    • 默认安装位置:c:\Users\用户名\AppData\Roaming\npm
    • 自定义位置:
      • 例如:node的安装路径为D:\Program Files\nodejs
      • 首先在node的安装目录下设置2个文件夹,node_global和node_cache
      • 全局路径cmd命令:npm config set perfix "D:\Program Files\nodejs\node_global"
      • 缓存路径cmd命令:npm config set cache"D:\Program Files\nodejs\node_cache"
    • 设置环境变量
      • 目的:任何目录下都可以使用NPM命令。
      • 设置位置为:用户变量(当前用户可用)或系统变量(所有用户可用)
      • 设置环境变量:在用户变量下新建NODE_PATH,变量值设置为全局路径npm config set perfix "D:\Program Files\nodejs\node_global
      • 编辑用户变量下的path,新建并输入全局路径"D:\Program Files\nodejs\node_global
  4. NPM初始化项目
    • 初始化动作在项目文件夹下进行,所以需要cmd进入到项目文件夹。例如:D:\BaiduSyncdisk\npm-demo1
    • 自定义参数初始化命令:npm init,然后按照提示操作,最后y确认。
    • 默认参数初始化命令:npm init -y,参数按照系统默认执行。
    • 初始化完成后,目录下会生成一个package.json文件。
    • 安装package.json两种的依赖包命令(此步骤取决于有无package里面有无设置依赖):npm install
  5. 安装模块(JS库)
    • 本地安装:npm install  模块名
      • @指明版本号:npm install [email protected]
      • ^次要版本和小版本最新,大版本不变,3是大版本,4是次要版本,1是小版本。
      • ~小版本最新,大版本和次要版本不变
      • latest 安装最近
    • 全局安装:npm install  模块名 -g
    • 本地安装针对本项目,全局安全共同使用 
    • 查看npm模块的全局安装位置:npm root -g
    •  

      查看所有全局安装的JS库:npm list -g 或者简写 npm ls -g

  6. 生产环境依赖和开发环境依赖的安装
    • 值得注意的是,依赖的安装是在项目下进行的,换言之,只有安装了依赖,你拿到的项目才能运行。
    • 生产环境依赖在package.json中的位置:dependencies,简称dep
      • 安装命令:npm install 模块名 --save, 或者npm install 模块名 --s,或者npm install 模块名 -S
    • 开发环境依赖在package.json中的位置:devdependencies,简称dev
      • 安装命令:npm install 模块名 --save-dev, 或者npm install 模块名 -D
  7. CNPM命令安装
    • npm 是从国外服务器下载安装
    • cnpm是从国内服务器安装
    • cnpm安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
    • cnpm安装成功后就可以使用cnpm install了

 

 

 

NPM命令大全:

1、设置npm路径
#全局安装路径
npm config set prefix "D:\Program Files\nodejs\node_global"
#缓存路径
npm config set cache "D:\Program Files\nodejs\node_cache"

2、设置镜像
#1,淘宝镜像源
npm config set registry https://registry.npmmirror.com
npm config set registry https://registry.npm.taobao.org

#2,腾讯云镜像源
npm config set registry http://mirrors.cloud.tencent.com/npm/

#3,华为云镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

# 官方默认全局镜像
npm config set registry https://registry.npmjs.org

#检查当前镜像
npm config get registry

3、常用命令简写说明
-g: #--global 的缩写,表示安装到全局目录里
-S: #--save 的缩写,表示安装的包将写入package.json里面的dependencies
-D: #--save-dev 的缩写,表示将安装的包将写入packege.json里面的devDependencies
i: #install的缩写,表示安装

4、安装模块
npm init # npm 初始化当前目录
npm i # 安装所有依赖
npm install # 安装所有依赖
npm i express # 安装模块到默认dependencies
# 安装指定版本和临时源
npm install -g [email protected] --registry=https://registry.npm.taobao.org

npm i express -g # 会安装到配置的全局目录下
npm i express -S # 安装包信息将加入到dependencies生产依赖
npm i express -D # 安装包信息将加入到devDependencies开发依赖

5、卸载模块
npm uninstall express # 卸载模块,但不卸载模块留在package.json中的对应信息
npm uninstall express -g # 卸载全局模块
npm uninstall express --save # 卸载模块,同时卸载留在package.json中dependencies下的信息
npm uninstall express --save-dev # 卸载模块,同时卸载留在package.json中devDependencies下的信息

6、更新模块
npm update express # 更新最新版本的express
npm update [email protected] # 更新到指定版本号的express
npm update express@latest # 更新到最后的新版本

7、查看命令
npm -v #查看版本号
npm root # 查看项目中模块所在的目录
npm root -g # 查看全局安装的模块所在目录
npm list 或者 npm ls # 查看本地已安装模块的清单列表
npm view express dependencies # 查看某个包对于各种包的依赖关系
npm view express version # 查看express最新的版本号
npm view express versions # 查看所有express历史版本号(很实用)
npm view express # 查看最新的express版本的信息
npm info express # 查看express的详细信息,等同于上面的npm view express
npm list express 或 npm ls express # 查看本地已安装的express的详细信息
npm view express repository.url # 查看express包的来源地址

8、其他命令
npm cache clean # 清除npm的缓存
npm prune # 清除项目中没有被使用的包
npm outdated # 检查模块是否已经过时
npm repo express # 会打开默认浏览器跳转到github中express的页面
npm docs express # 会打开默认浏览器跳转到github中express的README.MD文件信息
npm home express # 会打开默认浏览器跳转到github中express的主页

9、通过使用淘宝定制的cnpm安装
npm install -g cnpm --registry=https://registry.npmmirror.com
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 查看版本号
cnpm -v

标签:NPM,npm,vue,进阶,express,install,registry,模块,安装
From: https://www.cnblogs.com/beichengshiqiao/p/17251860.html

相关文章

  • 一文详解vue-cli2.0与vue-cli3.0之间的区别
    我们之所以介绍vue-cli2和vue-cli3的使用和区别,是因为VUE脚手架工具从vue-cli3版本开始,在项目结构等诸多方面开始与vue-cli2版本相比,有较大的优化与调整。因此,在学习和工......
  • SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图
    场景若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用Ele......
  • SpringBoot+Vue+Echarts实现双柱体柱状图
    场景 若依前后端分离版本地搭建开发环境并运行项目的教程:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-在上面搭建架构的基础上,实现使用E......
  • SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
    场景SpringBoot集成OpenOffice实现doc文档转html:SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-在上面初步使用了OpenOffice之后,怎样实现文档管理,......
  • Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
    场景Vue+Openlayer使用Draw实现交互式绘制线段:Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-在上面的基础上实现的交互式绘制线段,还可以实现绘制多......
  • Vue3+vite项目中如何动态导入并创建多个全局组件
    背景实际开发项目中,有些时候我们需要通过全局注册多个自定义组件,但是每个组件都导入一次,将会导致代码很冗余。实现方案customComponents/index.jsconstfiles=impor......
  • 【开发小记】vuex存储用户信息
    今天开发的过程中,遵循前人的经验对用户信息进行了存储。实现这个功能之后,我突然想到vuex本质是什么呢?它为什么要存在,以及它和浏览器的缓存的区别又是什么呢?(第三小节会给出......
  • Vue2响应式原理
    Vue.js基本上遵循MVVM(Model–View–ViewModel)架构模式,数据模型仅仅是普通的JavaScript对象。而当你修改它们时,视图会进行更新。本文讲解一下Vue响应式系统的底层细......
  • vue全家桶进阶之路2:JavaScript
    JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在Web开发领域有着举足轻重的地位。JavaScript与HTML和CSS......
  • vue全家桶进阶之路3:Node.js
    Node.js发布于2009年5月,由RyanDahl开发,是一个基于ChromeV8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript运行在服务端的开发平台,它让......