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

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

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

npm i grtest

在这里插入图片描述
我们在 node_modules目录
在这里插入图片描述
下面 找到 我们自己想依赖项目

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

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 变量 接收返回值 然后控制台输出
点击后确认 没有任何问题
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/373937.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

手拉手Vue3+vite引入echarts

技术栈springboot3hutool-alloshi-coreVue3viteechartsTailwindCSS软件版本IDEAIntelliJ IDEA 2022.2.1JDK17Spring Boot3.1hutool-all5.8.18oshi-core6.4.1Vue35.0.10vite5.0.10axios1.6.7echarts5.4.3 ECharts是一个使用 JavaScript 实现的开源可视化库&#xff0c;可以流畅…

苹果手机如何录屏?这里告诉你答案!

苹果公司的iPhone以其卓越的性能和用户体验受到了全球消费者的喜爱&#xff0c;而录屏功能作为手机的一项重要功能&#xff0c;能够帮助我们记录手机屏幕上的操作&#xff0c;分享游戏技巧、制作教程视频等。本文将为您介绍苹果手机如何录屏&#xff0c;帮助您更好地掌握录屏技…

Could not connect to Redis at 127.0.0.1:6379:由于目标计算机积极拒绝,无法连接...问题解决方法之一

一、问题描述 将Redis压缩包解压后&#xff0c;安装Redis过程中出现问题Could not connect to Redis at 127.0.0.1:6379:由于目标计算机积极拒绝&#xff0c;无法连接... 官网windows下redis开机自启动的指令如下&#xff1a; 1、在redis目录下执行 redis-server --service-in…

【征稿已开启】第五大数据、人工智能与软件工程国际研讨会(ICBASE 2024)

第五大数据、人工智能与软件工程国际研讨会&#xff08;ICBASE 2024&#xff09; 2024 5th International Conference on Big Data & Artificial Intelligence & Software Engineering 2024年09月20-22日 | 中国温州 第五届大数据、人工智能与软件工程国际研讨会&…

电脑虚拟内存怎么设置?1分钟快速增加内存!

“我电脑里的内存好像不太够用&#xff0c;因此&#xff0c;我想在电脑里增加一些虚拟内存。不知道我应该怎么操作呢&#xff1f;有什么比较简单的此操作方法吗&#xff1f;” 虚拟内存是计算机系统内存管理的一种技术&#xff0c;它为程序提供了一个比实际物理内存更大的内存空…

C#用Array类的FindAll方法和List<T>类的Add方法按关键词在数组中检索元素并输出

目录 一、使用的方法 1. Array.FindAll(T[], Predicate) 方法 &#xff08;1&#xff09;定义 &#xff08;2&#xff09;示例 2.List类的常用方法 &#xff08;1&#xff09;List.Add(T) 方法 &#xff08;2&#xff09;List.RemoveAt(Int32) 方法 &#xff08;3&…

C++判断二叉树是否对称

可以使用递归的方式判断二叉树是否对称。判断二叉树是否为空&#xff0c;若为空则返回 true。然后编写一个辅助函数 isSymmetricHelper&#xff0c;该函数接受两个参数&#xff0c;分别是左子树和右子树。在 isSymmetricHelper 函数中&#xff0c;判断左子树的左子树和右子树的…

挑战杯 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…

C++学习Day04之this指针

目录 一、程序及输出1.1 基础使用1.2 *this和链式编程1.2.1 返回引用进行链式编程1.2.2 返回值进行链式编程1.3 注意事项 二、分析与总结 一、程序及输出 在 C 中使用类的成员函数时&#xff0c;可以使用 this 指针来引用当前对象的地址。this 指针是一个隐式参数&#xff0c;它…

基于CNN卷积网络的MNIST手写数字识别matlab仿真,CNN编程实现不使用matlab工具箱

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络&#xff08;CNN&#xff09; 4.2 损失函数和优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ......................…

代码随想录 Leetcode47. 全排列 II

题目&#xff1a; 代码(首刷自解 2024年2月6日&#xff09;&#xff1a; class Solution { private:vector<vector<int>> res;vector<int> path; public:void backtracing(vector<int>& nums, vector<bool>& used1, vector<bool>…

leetcode 算法 67.二进制求和(python版)

需求 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例 1&#xff1a; 输入:a “11”, b “1” 输出&#xff1a;“100” 示例 2&#xff1a; 输入&#xff1a;a “1010”, b “1011” 输出&#xff1a;“10101” 代码 class Solution…

使用 WPF + Chrome 内核实现高稳定性的在线客服系统复合应用程序

对于在线客服与营销系统&#xff0c;客服端指的是后台提供服务的客服或营销人员&#xff0c;他们使用客服程序在后台观察网站的被访情况&#xff0c;开展营销活动或提供客户服务。在本篇文章中&#xff0c;我将详细介绍如何通过 WPF Chrome 内核的方式实现复合客服端应用程序。…

聚观早报 | 小米14 Ultra官宣;苹果汽车项目调整

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 2月6日消息 小米14 Ultra官宣 苹果汽车项目调整 ROG游戏手机8系列推出福利 一加Ace 3原神刻晴定制机官宣 苹果i…

vite+vue3发布自己的npm组件+工具函数

记录一下个人最近一次发布npm组件的过程&#xff1a; 一、创建组件和工具函数 执行命令创建一个空项目&#xff1a; npm create vite 创建过程稍微有些慢&#xff0c;不知何故&#xff1f;其中选择vue , 个人暂时使用的JS 。在 src 目录下面创建一个文件 package 存放组件和公…

计算机网络-差错控制(纠错编码 海明码 纠错方法)

文章目录 纠错编码-海明码海明距离1.确定校验码位数r2.确定校验码和数据的位置3.求出校验码的值4.检错并纠错纠错方法1纠错方法2 小结 纠错编码-海明码 奇偶校验码&#xff1a;只能发现错误不能找到错误位置和纠正错误 海明距离 如果找到码距为1&#xff0c;那肯定为1了&…

K8S之标签的介绍和使用

标签 标签定义标签实操1、对Node节点打标签2、对Pod资源打标签查看资源标签删除资源标签 标签定义 标签就是一对 key/value &#xff0c;被关联到对象上。 标签的使用让我们能够表示出对象的特点&#xff0c;比如使用在Pod上&#xff0c;能一眼看出这个Pod是干什么的。也可以用…

校园墙表白墙系统uniapp微信小程序

配置文件 (自动编号、配置参数名称、配置参数值)&#xff1b; 前端开发:vue 语言&#xff1a;javapythonnodejsphp均支持 运行软件:idea/eclipse/vscode/pycharm/wamp均支持 框架支持:Ssm/django/flask/thinkphp/springboot/springcloud均支持 数据库 mysql 数据库工具&#x…

二维曲线旋转形成三维曲面

开发环境&#xff1a; Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example demo解决问题&#xff1a;创建一个带有盖的球体的可视化图形。程序通过将一个二维曲线沿着y轴旋转&#xff0c;形成三维曲面&#xff0c;从而实现这一目标。 关键…

Linux第42步_移植ST公司uboot的第3步_uboot命令测试,搭建nfs服务器和tftp服务器

测试uboot命令&#xff0c;搭建nfs服务器和tftp服务器&#xff0c;是测试uboot非常关键的一步。跳过这一节&#xff0c;后面可能要踩坑。 一、输入“help回车”&#xff0c;查询uboot所支持的命令 二、输入“? bootz回车”&#xff0c;查询“bootz”怎么用 注意&#xff1a;和…