npm 上传一个自己的应用(3) 在项目中导入及使用自己上传到NPM的工具

亦凉 2024-04-22 07:27 78阅读 0赞

上文 [npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM][npm _2_ _JavaScript_ _NPM] 我们创建了一个函数 并发上了npm  
![在这里插入图片描述][534fdeb2a8464d939ab18a08641ab814.png]  
最后 我们这里 我们可以看到它的安装指令

这里 我们可以打开一个vue项目  
![在这里插入图片描述][6a199d21726943aeaa53986db9458b14.png]  
终端输入 我们的安装指令  
npm i 自己的包  
如下代码

npm i grtest

![在这里插入图片描述][edf4573d40da45d3ad174e7d67b3da8c.png]  
我们在 node\_modules目录  
![在这里插入图片描述][55c922f0610140768d9b5c0366b705b4.png]  
下面 找到 我们自己想依赖项目

打开这个index.js 这个方法看着是不是非常熟悉呢？ 哈哈哈  
![在这里插入图片描述][c3f08bfa26684866ae1c26b4ad4582a8.png]  
因为 我们这里的导出是

export {
        
        summation
    }

这是多个导出  
要

export default summation

才是唯一导出

因为是多个导出 我们导入 要这样

import {
         summation } from "grtest";

简单说 import \{ 要引入的方法/组件名 \} from “工具名”;  
如果是 唯一导出 import 要引入的方法/组件名 from “工具名”;

然后 我们组件整体编写代码如下

<template>
      <div>
        <button @click="count">计算</button>
      </div>
    </template>
    
    <script>
    import {
           summation } from "grtest";
    export default {
          
      data() {
          
        return {
          
        };
      },
      methods: {
          
        count() {
          
          let arg = summation(1,2);
          console.log(arg);
        }
      }
    };
    </script>

这里 我们导入了 我们写的 grtest 下的 summation  
然后 通过函数 count 调用 summation 我们方法逻辑是 两个参数相加  
然后我们写一个 arg 变量 接收返回值 然后控制台输出  
点击后确认 没有任何问题  
![在这里插入图片描述][3c1de9c09aa5491d9b7a3488933f7c0a.png]

[npm _2_ _JavaScript_ _NPM]: https://blog.csdn.net/weixin_45966674/article/details/136036525?spm=1001.2014.3001.5501
[534fdeb2a8464d939ab18a08641ab814.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/69b690a1e8014b64b0e9feeb0e1482e1.png
[6a199d21726943aeaa53986db9458b14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/497201ad079147a5861e28c1ff466b5c.png
[edf4573d40da45d3ad174e7d67b3da8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/666a022208a9482ca3f9fec263ac89db.png
[55c922f0610140768d9b5c0366b705b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/82e88382af6743c899dedfa979f561c5.png
[c3f08bfa26684866ae1c26b4ad4582a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/24cdd2fe736f4fc4bb270db60acc147a.png
[3c1de9c09aa5491d9b7a3488933f7c0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1aeb29aa3df949cd83cdcf223a8c1e04.png