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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
js有关元素内容操作小结
Dec 20 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
react路由配置方式详解
Aug 07 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
原生js实现日期联动
2015/01/12 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
丧事主持词大全
2014/04/02 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2015年人事科工作总结
2015/04/28 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript