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 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
js实现星星海特效的示例
Sep 28 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 函数语法介绍一
2009/06/14 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JS求平均值的小例子
2013/11/29 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
简述JS控制台的使用
2018/07/15 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
小学家长会邀请函
2014/01/23 职场文书
小学防溺水制度
2014/01/29 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
公开服务承诺制度
2014/03/26 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
yolov5返回坐标的方法实例
2022/03/17 Python