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
Sep 24 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
js实现跨域的多种方法
Dec 25 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
页面点击小红心js实现代码
May 26 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
vue实现列表拖拽排序的功能
Nov 02 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
如何编写jquery插件
2017/03/29 jQuery
利用jQuery解析获取JSON数据
2017/04/08 jQuery
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
函授药学自我鉴定
2014/02/07 职场文书
房屋委托书范本
2014/04/04 职场文书
违纪学生保证书
2015/02/27 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
讲座通知范文
2015/04/23 职场文书