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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
理解javascript中DOM事件
Dec 25 Javascript
Vue中使用vux的配置详解
May 05 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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
Laravel5中contracts详解
2015/03/02 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
js验证密码强度解析
2020/03/18 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python3中exp()函数用法分析
2019/02/19 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
某科技软件测试面试题
2013/05/19 面试题
JAVA程序员面试题
2012/10/03 面试题
拖鞋店创业计划书
2014/01/15 职场文书
个人欠款担保书
2014/05/20 职场文书
考研英语复习计划
2015/01/19 职场文书
五年级语文教学反思
2016/03/03 职场文书
合作意向书范本
2019/04/17 职场文书