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 相关文章推荐
修复ie8&chrome下window的resize事件多次执行
Oct 20 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
javaScript封装的各种写法
Aug 14 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
在视频前插入广告
2006/11/20 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python循环监控远程端口的方法
2015/03/14 Python
python 系统调用的实例详解
2017/07/11 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
军训自我鉴定
2014/01/22 职场文书
老龄工作先进事迹
2014/08/15 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
幼儿园大班教学反思
2016/03/02 职场文书