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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
element 动态合并表格的步骤
Dec 31 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
写一个用户在线显示的程序
2006/10/09 PHP
PHP重定向的3种方式
2013/03/07 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Django框架视图函数设计示例
2019/07/29 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
thinkphp5 路由分发原理
2021/03/18 PHP
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
护理学专业推荐信
2013/12/03 职场文书
个人自我剖析材料
2014/02/07 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
《落花生》教学反思
2014/02/25 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
基层党支部整改方案
2014/10/25 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书