一，npm全局安装:

安装时加参数 -g 此时模块会被安装到全局目录中, 而不是被安装到命令行当前目录下 1,全局目录在哪里？ 查看全局目录

liuhongdi@lhdpc:/data/vue/demo1$ npm config ls -l | grep prefix
...
prefix = "/usr/local/soft/node-v16.13.1-linux-x64” 

可以看到默认的全局目录就是 node的安装目录   2,npm安装vue是全局安装最经典的例子： 安装vue

liuhongdi@lhdpc:/usr/local/source$ npm install -g @vue/cli

查看已安装的程序:

liuhongdi@lhdpc:/data/vue/demo1$ ll /usr/local/soft/node-v16.13.1-linux-x64/bin/vue
lrwxrwxrwx 1 liuhongdi liuhongdi 39  2月  4 09:21 /usr/local/soft/node-v16.13.1-linux-x64/bin/vue -> '../lib/node_modules/@vue/cli/bin/vue.js’*

可以看到全局目录/bin/下，增加了 bin/vue, 查看已安装的vue的版本:

liuhongdi@lhdpc:/data/vue/demo1$ /usr/local/soft/node-v16.13.1-linux-x64/bin/vue -V
@vue/cli 4.5.15

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，非全局安装：

安装时不加参数 -g 模块被安装到命令行当前目录下 所以它的功能通常是为当前项目安装第三方模块   例子：为当前项目安装nprogress 查看当前已安装模块

liuhongdi@lhdpc:/data/vue/demo1$ npm list
demo1@0.1.0 /data/vue/demo1
├── @vue/cli-plugin-babel@4.5.15
├── @vue/cli-plugin-eslint@4.5.15
├── @vue/cli-service@4.5.15
├── @vue/compiler-sfc@3.2.26
├── axios@0.24.0
├── babel-eslint@10.1.0
├── bindings@1.5.0 extraneous
├── core-js@3.20.1
├── element-plus@1.2.0-beta.6
├── eslint-plugin-vue@7.20.0
├── eslint@6.8.0
├── file-uri-to-path@1.0.0 extraneous
├── js-md5@0.7.3
├── nan@2.15.0 extraneous
├── vue-router@3.5.3
└── vue@3.2.26

可以看到还没有安装nprogress

安装

liuhongdi@lhdpc:/data/vue/demo1$ npm install -S nprogress
 
added 1 package in 4s
 
21 packages are looking for funding
  run `npm fund` for details

查看安装模块的版本:

liuhongdi@lhdpc:/data/vue/demo1$ npm list nprogress
demo1@0.1.0 /data/vue/demo1
└── nprogress@0.2.0

三，查看node和npm的版本:

liuhongdi@lhdpc:/data/vue/demo1$ node -v
v16.13.1
liuhongdi@lhdpc:/data/vue/demo1$ npm -v
8.4.1