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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js导出txt示例代码
2014/01/14 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
清洁工岗位职责
2014/01/29 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
应届大专生求职信
2014/06/26 职场文书
民族精神月活动总结
2014/08/28 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
表扬稿格式范文
2015/01/16 职场文书
七年级作文之秋游
2019/10/21 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL