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 Map 和 List 的简单实现代码
Jul 08 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
浅谈Vue的computed计算属性
Mar 21 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
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python黑魔法之编码转换
2016/01/25 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python中reload(module)的用法示例详解
2017/09/15 Python
详解flask表单提交的两种方式
2018/07/21 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
对Python _取log的几种方式小结
2019/07/25 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
如何基于python实现脚本加密
2019/12/28 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
团员个人的自我评价
2013/12/02 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
车辆委托书范本
2014/10/05 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
入党申请书怎么写?
2019/06/21 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
mysql配置SSL证书登录的实现
2021/09/04 MySQL
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js