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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
js回文数的4种判断方法示例
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 文本文件的读取效率
2012/02/10 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python3如何解决字符编码问题详解
2017/04/23 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python分类测试代码实例汇总
2020/07/23 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
医生进修自我鉴定
2014/01/19 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers