vue中npm包全局安装和局部安装过程


Posted in Javascript onSeptember 03, 2019

全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中。在windows和mac中,全局安装的默认路径是不同的。在mac中默认是安装到 /usr/locla/lib 中。在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径。

// 查看全局安装路径
npm root -g
// 查看npm的基础设置
npm config ls
// 查看安装目录路径
npm config get prefix

全局命令

npm包在全局安装之后,这个包的命令就会被注册到全局,你就可以直接在命令行中执行这个命令了。其实当你全局安装一个npm包之后,这个包被存放在 /usr/locla/lib/node_modules 或者 C:\Program Files\nodejs\node_modules 目录下。而在这个包的 package.json 文件中,在 bin 属性下配置的执行命令,会放在 /usr/locla/bin 或者 C:\Program Files\nodejs 文件中。当你在命令行执行这个命令,系统就会执行 /usr/locla/bin 目录下对应的文件。

安装过程

以全局安装vue-cli为例,为大家简述一下安装过程。

npm install -g @vue/cli 安装vue包到 /usr/locla/lib/node_modules

vue中npm包全局安装和局部安装过程
vue中npm包全局安装和局部安装过程

查找node_modules目录下的vue包的package.json中的bin属性。

 

vue中npm包全局安装和局部安装过程

在目录 /usr/locla/bin 或者 C:\Program Files\nodejs 查看vue命令的执行文件

vue中npm包全局安装和局部安装过程
vue中npm包全局安装和局部安装过程

在命令行中执行 vue create vue-test

vue中npm包全局安装和局部安装过程

本地安装

安装位置

在特定项目中执行 npm install xxx ,那么这个包会被安装在这个项目的 node_moduels 目录下。但是如果你在这个项目中直接执行包中的命令,就会发现控制台报错,告诉你这个命令找不到。这时候有两个解决方法:

npx 包命令

"scripts": { "包命令": "包命令",}

原理: 在本地安装一个包之后,这个包的命令会被添加到项目的 node_modules/.bin 文件中。执行 npm run 命令 ,package.json中的scripts会按照一定顺序寻找对应命令的位置,本地的 node_modules/.bin 也在寻找的清单中。所以本地安装的包的命令可以执行。

总结

以上所述是小编给大家介绍的vue中npm包全局安装和局部安装过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 #Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 #Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
js tab栏切换代码实例解析
Sep 03 #Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 #Javascript
Node.js学习教程之Module模块
Sep 03 #Javascript
You might like
谈一谈收音机的高放电路
2021/03/02 无线电
PHP伪造referer实例代码
2008/09/20 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
node跨域请求方法小结
2017/08/25 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
利用python画出折线图
2018/07/26 Python
django框架F&Q 聚合与分组操作示例
2019/12/12 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
医药类个人求职的自我评价
2014/02/12 职场文书
《燕子》教学反思
2014/02/18 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
春节请假条
2014/04/11 职场文书
带病坚持工作事迹
2014/05/03 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
公司离职证明标准范本
2014/10/05 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang