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 相关文章推荐
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
php str_replace的替换漏洞
2008/03/15 PHP
PHP 万年历实现代码
2012/10/18 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python八皇后问题的解决方法
2018/09/27 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
英国复古服装购物网站:Collectif
2019/10/30 全球购物
介绍一下#error预处理
2015/09/25 面试题
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
党员活动日总结
2014/05/05 职场文书
小学生教师节广播稿
2015/08/19 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers