使用npm下载的依赖，如何引入，以及使用

最新推荐文章于 2025-03-07 11:44:40 发布

wxj_web

最新推荐文章于 2025-03-07 11:44:40 发布

阅读量1.4w

点赞数 1

分类专栏： Vue websocket Vue 文章标签： vue 公司内部框架 npm 依赖引入

本文链接：https://blog.youkuaiyun.com/wxj_ios/article/details/78981365

版权

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

Vue websocket

3 篇文章

订阅专栏

  1、明确自身需要的依赖是什么，可以在npm公共资源库内需要，找到对应的指令，比如加载websocket： 
 https://www.npmjs.com/package/sockjs-client 
  和  
 https://www.npmjs.com/package/@stomp/stompjs 
   

 
 两个指令分别是：npm install sockjs-client 和npm install @stomp/stompjs 

 
 2、在我们的框架当中，找到package.json文件打开，找到其中 
 "dependencies" 
 :  
 { 

 
  
 "@stomp/stompjs" 
 :  
 "^4.0.0" 
 , 

 
  
 "axios" 
 :  
 "^0.17.1" 
 , 

 
  
 "sockjs-client" 
 :  
 "^1.1.4" 
 , 

 
  
 "vue" 
 :  
 "^2.5.2" 
 , 

 
  
 "vue-router" 
 :  
 "^3.0.1" 
 , 

 
  
 "vuex" 
 :  
 "^3.0.1" 

 
 } 
 , 

  3、在需要引入的地方写入： 

 
 import  
 SockJS  
 from  
 'sockjs-client' 
 ; //  
 'sockjs-client' 必须与package.json文件当中dependencies 当中的一模一样 

 
 import  
 Stomp  
 from  
 '@stomp/stompjs' 
 ; 

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wxj_web

关注关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

npm包需要的依赖

weixin_44252911的博客

07-02

716

在 Webpack 这样的前端构建工具中，loader是一个用于处理模块的转换器。当 Webpack 遇到一个模块时，它会查找与该模块相关的 loader，并使用该 loader来处理该模块。处理后的结果（通常是转换后的代码或资源）将被 Webpack 进一步处理。loader会将webpack不认识的css文件、较新的es语法等通过配置的规则，处理为webpack认识的模样，以供最后的打包处理。所以针对当前的需求，我们需要在webpack.config.js中，增加对不同文件的处理规则。

自定义Vue组件打包、发布到npm及使用教程

10-16

创建后，通过cd命令进入项目目录，并执行npm install来安装项目依赖。之后，使用npm run dev命令启动项目以进行本地开发和测试。 3. 组件的编写与测试在开发自定义Vue组件时，需要在组件的.vue文件中实现相应的...

1 条评论您还未登录，请先登录后发表或查看评论

【FAQ】NPM 引入本地依赖包

朝拜者

01-22

2392

NPM 引入本地依赖包

html引入npm包,npm安装的包如何引入css, js

weixin_30513765的博客

06-25

4543

本文主要是在laravel框架中引入npm安装的资源的，不知道laravel，纯前端的小伙伴也不要慌，都是一样的laravel用的mix，默认的mix文件是根目录下的 webpack.mix.js 默认有这么两行定义：mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');这两...

执行npm install 时，是如何将依赖包下载下来的。

superzhang6666的博客

03-07

1005

npm install 时如何将项目下载下来的？关键是这个配置文件

vue + nodejs + npm

隔壁家的小屁孩

12-26

1458

node

批量导入Npm包依赖到Nexus私服（批量上传脚本）

小单的博客专栏

11-22

6064

解释原因就是因为这个命令需要你的环境要预装 npm 环境，而我们使用 bash 脚本却是通用的，可以随便找个 linux 服务器运行就可以。你可以按需精确挑选依赖包下载，也可以比较方便的统一处理全部下载，后面使用脚本批量上传的时候，多次重复上传同一个包没有影响，私服会忽略仓库中已经存在的包。如果你刚好有 npm 环境，并且没有批量发布 tgz 包的需求，发布个别几个 tgz 包的话直接使用。基于上面几点情况，产生了需要将联网环境的依赖包批量上传到内网环境的Nexus中的需求。注：如果你疑问为什么不用。

stomp和SockJS的下载并使用

Change!

03-06

2949

stomp和SockJS的下载并使用

npm安装私有指定路径的依赖包

lfl_web_foreEnd的博客

12-22

1518

npm安装私有指定路径的依赖包

微信小程序云开发如何使用npm安装依赖

10-16

微信小程序的开发工具为开发者提供了方便的操作来在云端安装第三方npm依赖，即一键云端安装。具体步骤如下： 1. 开发者在云函数中右键选择“终端打开”，在打开的终端中进行操作。 2. 使用npm命令来安装所需的第三...

微信小程序使用npm支持踩坑

10-17

现在，让我们深入探讨在微信小程序中使用npm支持时可能遇到的问题以及解决方案。微信小程序从基础库版本2.2.1及以上和开发者工具1.02.1808300及以上开始，正式支持通过npm安装第三方库，这极大地扩展了小程序的功能...

使用Vue-CLI脚手架搭建项目和导入项目依赖包

weixin_55959870的博客

01-12

1732

1.首先安装node.js 下载地址: 下载 | Node.js 中文网 (nodejs.cn) 2.安装Vue CLI window+R 输入cmd npm install -g @vue/cli 3.本地新建一个文件夹 npm install -g vue-cli 这条命令执行完成生成文件gshop-client 等待时间较长 vue init webpack gshop-client 进入gshop-client cdgshop-clien...

前端 npm5中本地间模块引用的最好方式（附带引用方法总结）

zhangxin09的专栏

08-03

2150

现在组件化打包为一个个项目发布到 npm。但是当前项目希望引入本地的工程，而无须发布到 npm 再更新。可否直接引用本地的其他项目，而且可以热更新呢？

如何在项目中引用本地的npm包

u010227042的博客

03-19

1349

/将 ./path/to/dependency1 和 ./path/to/dependency2 替换为实际依赖项目录的相对路径。2. 不要指定包名的版本号，而是指定依赖项所在的本地路径。本地路径应该是相对于当前项目目录的路径。// 正常的dependencies中的依赖包引用的是你npm所设置的镜像源所对应的版本号。1. 打开您的 package.json 文件，找到 dependencies 部分。package.json中配置引用本地依赖包。// 如何想要引用本地依赖包就要写成以下形式。

vue 引入依赖的方法

qq_35181466的博客

04-21

4605

1.网络引用 1.1 在vue的入口页面index.html中引入网络文件例如： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 1.2 在根目录下的build/webpack.base.conf.js中的module.exports配置导出对象例如: module.exports = ...

vue项目导入本地启动

weixin_39249427的博客

03-03

1321

导入后：下载编译依赖包 cd 目录 npm install npm install和cnpm install时的不同如果package-lock.json存在，则两者安装后结果可能不一样。因为cnpm install安装时，是不会去从package-lock.json中读取依赖包的版本信息的。 npm 5版本，在延续npm 3扁平化依赖包安装方式的基础上，新增了一个packag...

使用npm包

enhenglhm的博客

11-11

876

Vant-Weapp地址回到小程序右键终端初始化npm -init -y 安装npm # 通过 npm 安装 npm i @vant/weapp@1.3.3 -S --production 构建npm 点击详情小程序可以使用npm包将app.json里面的style属性删除使用vant 自定义属性使用 --变量名：下面的变量作用域为html 修改vant变量名字实现样式的变化在vant-we...

如何复制全局安装的npm包到另一台设备

凌晨不睡觉

12-11

5689

无网开发时总是需要手动将一些脚手架等从一台有网设备下载好后复制到无网设备，局部安装的依赖直接复制node_modules目录即可但全局安装的就需要按本文操作了 1. 获取全局npm包安装路径可通过命令npm config get prefix查看 npm 安装路径（npm config set prefix 可设置 npm 安装路径）；例如： 2. 准备复制在两台设备上执行上述命令获取npm安装路径后，分别打开响应路径，准备复制工作。将输出的路径复制到资源关联器即可直接打开响应路径，例： 3..

使用npm下载包

最新发布

03-15

### 如何使用 npm 安装或下载所需的包 #### 使用 `npm` 下载所需包的方法可以通过多种方式利用 `npm` 来安装或下载所需的包。以下是几种常见的方法： 1. **全局安装** 如果需要在整个系统范围内访问某个工具（例如 CLI 工具），可以使用 `-g` 参数进行全局安装。命令如下： ```bash npm install -g 包名称 ``` 这种方式适用于像 `typescript`, `eslint` 或其他开发者工具。 2. **局部安装到项目中作为依赖项** 对于特定项目的依赖，可以直接将其添加到当前项目的 `node_modules` 文件夹并更新 `package.json` 的 `dependencies` 字段。命令如下： ```bash npm install 包名称 --save ``` 此操作会自动将所选包记录在 `package.json` 中的 `dependencies` 部分[^1]。 3. **安装开发环境专用的包** 开发过程中使用的辅助工具（如测试框架、构建工具等）通常不需要随应用一起发布，因此应标记为开发依赖。这可通过 `--save-dev` 实现： ```bash npm install 包名称 --save-dev ``` 4. **安装本地路径中的自定义包** 若存在一个位于本机上的私有模块或者未发布的包，则可直接通过指定其相对于当前工作目录的位置完成安装。例如： ```bash npm install ./path/to/local/package ``` 上述指令能够把目标位置下的包加入至当前工程之中，并同步修改配置文件相关内容。 5. **卸载不再需要的包** 当某些包已无用途时，可以选择移除它们以保持系统的整洁度。对于生产环境下以及开发阶段分别对应的删除动作分别为： ```bash npm uninstall 包名称 npm uninstall 包名称 --save-dev ``` 6. **安装具体版本号的软件包** 若要精确控制引入组件的具体发行版次序而非最新稳定版，默认情况下可能无法满足需求；此时可以在命名后面附加确切标签即可达成目的。比如获取 v1.0.0 版本的例子展示如下： ```bash npm install 包名称@1.0.0 ``` 更多关于版本管理的信息参见参考资料说明[^3]。 7. **特殊场景注意事项——微信小程序内的 NPM 支持情况** 虽然现代前端生态允许借助 NPM 方便快捷地集成外部资源，但在实际运用当中仍可能存在兼容性障碍。特别是在针对移动端轻量化应用场景设计的小程序平台里头，需要注意以下几点局限条件： - 不支持基于 Node.js 原生 API 构建的功能扩展； - 缺乏对标准 Web 浏览器外设接口的支持； - 排除了涉及底层硬件加速实现的技术方案[^2]。 ```python print("以上就是有关如何使用NPM来进行各种类型包管理的操作指南") ```