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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript函数详解
Nov 17 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 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
php递归删除目录与文件的方法
2015/01/30 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php实现微信支付之企业付款
2018/05/30 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python发送Email方法实例
2014/08/21 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python基础练习之几个简单的游戏
2017/11/10 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python超时重新请求解决方案
2019/10/21 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
农救科工作职责
2013/11/27 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
边城读书笔记
2015/06/29 职场文书
主婚人致辞精选
2015/07/28 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP