草庐IT

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

北城石桥 2023-03-28 原文

  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 bootstrap@3.4.1
      • ^次要版本和小版本最新,大版本不变,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 express@2.5.8 --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 express@2.1.0 # 更新到指定版本号的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

有关vue全家桶进阶之路4:NPM包的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  3. ruby - Ruby gems 的问题(损坏?)试图让指南针在 npm 中工作 - 2

    我不是Ruby专家,但想弄清楚发生了什么,因为我试图让指南针在节点应用程序中工作,但我的Ruby似乎坏了。打字:ruby--version让我:ruby2.1.1p76(2014-02-24revision45161)[x86_64-darwin13.0]我安装了Homebrew,之前遇到过Ruby版本的问题,但它似乎已安装并且可以正常工作。但是,当我使用gem输入请求时,出现此错误:$gem-hErrorloadingRubyGemsplugin"/Users/user_dir/.rvm/gems/ruby-2.1.1@global/gems/executable-hooks-1.3

  4. ruby - npm link 的 Ruby 类似物是什么? - 2

    如果您是Nodejs项目的源代码,则命令npmlink会以这样一种方式安装它:您所做的任何更改都适用于所有地方,而无需重新安装。npmlinkisdesignedtoinstalladevelopmentpackageandseethechangesinrealtimewithouthavingtokeepre-installingit.https://www.npmjs.org/doc/misc/npm-developers.html#link-packages是否有Ruby项目的类似物? 最佳答案 Ruby的等价物是在Gemfi

  5. 焕新古文化传承之路,AI为古彝文识别赋能 - 2

    目录1古彝文与古典保护2古文识别的挑战2.1西文与汉文OCR2.2古彝文识别难点3合合信息:古彝文保护新思路3.1图像矫正3.2图像增强3.3语义理解3.4工程技巧4总结1古彝文与古典保护彝文指的是云南、贵州、四川等地的彝族人使用的文字,区别于现代意义上的彝文,古彝文指的是在民间流通使用的原生态彝文,多达87046字。古彝文的起源距今至少数千年,是世界上最古老的文字之一。对古彝文字集研究有助于理解尚未被翻译成汉文、用字尚未规范化的古籍,更深层、透彻地作用于传统文化保护。古彝文字义对照图(网络资料+邵文苑供图)古籍是不可再生的宝贵资源,应当得到妥善保护。中国的古籍在历史上迭经水火兵燹等自然灾害、

  6. vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数! - 2

    平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图: 这样做用户体验瞬间得到提升,接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  7. ruby-on-rails - rails heroku - 如何安装需要 'npm install ...' 的 javascript 依赖项 - 2

    我正在将我的Rails应用程序部署到heroku。我想使用一些javascript库,它们希望我们像这样安装npm依赖项:npminstallabc因此,在本地我可以安装npm和执行“npminstallabc”。不确定如何在heroku中与我的Rails应用程序一起使用。 最佳答案 使用Heroku的多重构建方法:UsingMultipleBuildpacksforanApp通过先安装NodeJS,再安装Ruby,Heroku将在Ruby中发生任何事情之前安装您的Node依赖项。herokubuildpacks:setheroku

  8. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一:vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二:安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三:

  9. ruby-on-rails - Node/NPM 依赖于 Ruby on Rails 引擎 gem Assets 管道 - 2

    我正在构建一个打包在gem中的RubyonRails引擎,但无法弄清楚如何确保加载NPM依赖项。在常规Rails应用程序中,您可以安装NPM,然后使用npminstall命令将包放入node_modules基本目录中。然后在您的application.rb中使用以下行将node_modules添加到Assets管道:config.assets.paths但是,就我而言,我正在构建一个Rails引擎以作为gem加载。.gemspec文件允许您的gem将其他Ruby依赖项加载到主机应用程序中,但我不知道如何对Node依赖项执行相同的操作。在我的引擎中注意它需要某些NPM模块才能工作以便它们

  10. Vue3的新特性 - 2

    Vue3的新特性包括:CompositionAPI:一种新的API风格,可将有关组件功能的代码逻辑封装在单独的函数中,从而更好地管理和重用代码。Teleport:可以让组件在DOM层次结构中的任何位置渲染。Suspense:一种新的异步渲染模式,可以优化应用程序的性能。更快的渲染速度:Vue3使用了新的虚拟DOM算法,并且对渲染过程进行了优化,因此在渲染大型应用时性能更高。更小的包大小:Vue3的打包大小比Vue2更小,因为它不再需要依赖像vue-template-compiler这样的工具。其他改进:Vue3还具有其他一些改进,例如更好的TypeScript支持、更好的错误提示和更好的调试工

随机推荐