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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
老生常谈的跨域处理
Jan 11 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
vuex的简单使用教程
Feb 02 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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二维数组排序详解
2013/11/06 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
上海期货面试题
2014/01/31 面试题
2014年学校体育工作总结
2014/12/08 职场文书
财务统计员岗位职责
2015/04/14 职场文书
加薪申请报告范本
2015/05/15 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
DQL数据查询语句使用示例
2022/12/24 MySQL