发布组件到npm

1.环境准备,需要装好node,注册号npm账号,这里不做详解

2.创建编写组件和方法的文件夹package

3.在文件夹中创建需要定义的组件,并且加上name属性

//组件
<template><div><button>按钮组件</button></div>
</template>
<script>
export default {name: 'ComButton'
}
</script>
//====================================分割线============================================
//方法utils
const  func1=()=>{return 'test1';
}
const func2=()=>{return 'test2';
}
export default{func1,func2
}

4.然后在package文件中新建index.js引入写好的组件和方法

//提一下批量引入的方法,如果是vuecli则使用require.context(),vite使用import mate golb()
import ComBotton from './com-button/index'
import publicFunc from './public-func/index'const coms=[ComBotton]const install = function (Vue) {coms.forEach((com) => {Vue.component(com.name, com);});};export default { install, publicFunc }

5.引入完成之后一定要先本地测试一下是否可用,如果可用再进行上传

//在main.js中引入
import com from './package/index'
Vue.prototype.$public=com.publicFunc
Vue.use(com)//在vue模块使用
<template><div id="app"><ComButton></ComButton></div>
</template>
<script>
export default {mounted() {console.log(this.$public.func1());}
}
</script>

6.验证可用之后,开始配置package.json进行自动化打包

//如果是vuecli2
"package": "vue-cli-service build --target lib ./src/package/index.js --name zqcom --dest zqcom"
//如果采用vuecli3 提供了新方法
"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js" 

7.执行npm run package进行打包

在这里插入图片描述

8.打包完成之后会生成一个zqcom文件,这就是需要上传的npm包了,然后在“包的文件里执行npm init -y”进行包配置,这里主要配置包名称,和版本号

9.下面就是进行发包了,因为本地可能安装了淘宝镜像,所以先把镜像切换回来

npm config set registry=https://registry.npmjs.org

10.登陆npm账号

npm adduser
//后面按步骤操作即可
登陆成功之后
npm publish //推送包到npm成功之后登陆npm搜索查看如下图,这一步出问题看下面的补充说明

在这里插入图片描述

11.下面就可以在项目中正常使用了

//在main.js中引入组件和方法
import  zqcom  from 'zqcom'
Vue.prototype.$Public=zqcom.publicFunc
Vue.use(zqcom)
//正常使用
<template><div id="app"><ComButton></ComButton></div>
</template>
<script>
export default {mounted() {console.log(this.$Public.func1());}
}
</script>

12.补充说明

如果出现报错情况Remove the 'private' field from the package.json to publish it.查看打包之前的文件的package.json中的private是否设置成了false,一般是这里为true造成的,可以改成false或删除属性

点关注不迷路,感谢支持!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VSSM VMamba实现

文章目录 VSSM维度变换初始化模型参数初始化模型搭建def_make_layerdef _make_downsample patch embed第一至四阶段分类器 VSSBlockdef __ init__ssm分支mlp分支 def forward VSSM Mamba实现可以参照之前的 mamba_minimal系列 论文地址&#xff1a; VMamba 论文阅读&#xff1…

Vscode 修改C++版本

1. 首先要检查GCC版本&#xff0c;有的gcc版本过低会导致C版本升级不成功 可以用cmd&#xff0c;用gcc --version命令查看gcc版本 我这里就是gcc版本较低&#xff0c;不支持c17 需要先升级gcc版本 gcc与c对应的版本&#xff0c;大家可以在这位大佬的博客中看&#xff0c;写…

经典排序算法之计数排序|c++代码实现

引言 排序算法c实现系列第8弹——计数排序。 计数排序是理解起来相对简单的一个排序算法&#xff0c; 计数排序 计数排序&#xff08;Counting Sort&#xff09;是一种非比较型的排序算法&#xff0c;它的基本思想是统计待排序数组中每个元素的出现次数&#xff0c;然后根据…

django-q轻量级定时任务制定

django-q ,celery&#xff0c;apschedule都可以作为python的选型&#xff0c;但是django-q更轻量级&#xff0c;可以定制想要的任务&#xff0c;通过消息中间件&#xff0c;来实现不太高并发的实现 官网介绍地址 django-q官网地址 本次测试的是python3.12版本 首先需要安装dja…

几何相互作用GNN预测3D-PLA

预测PLA是药物发现中的核心问题。最近的进展显示了将ML应用于PLA预测的巨大潜力。然而,它们大多忽略了复合物的3D结构和蛋白质与配体之间的物理相互作用,而这对于理解结合机制至关重要。作者提出了一种结合3D结构和物理相互作用的几何相互作用图神经网络GIGN,用于预测蛋白质…

架构实战--以海量存储系统讲解热门话题:分布式概念

关注我&#xff0c;持续分享逻辑思维&管理思维&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 有意找工作的同学&#xff0c;请参考博主的原创&#xff1a;《面试官心得--面试前应该如何准备》&#xff0c;《面试官心得--面试时如何进行自…

Nodejs 第五十七章(addon)

Nodejs在IO方面拥有极强的能力&#xff0c;但是对CPU密集型任务&#xff0c;会有不足&#xff0c;为了填补这方面的缺点&#xff0c;Nodejs支持c/c为其编写原生nodejs插件&#xff0c;补充这方面的能力。 Nodejs c扩展 c编写的代码能够被编译成一个动态链接库(dll),可以被nod…

VMware workstation的安装

VMware workstation安装&#xff1a; 1.双击VMware-workstation-full-9.0.0-812388.exe 2.点击next进行安装 选择安装方式 Typical&#xff1a;典型安装 Custom&#xff1a;自定义安装 选择程序安装位置 点击change选择程序安装位置&#xff0c;然后点击next 选择是否自动…

vue 如何实现手机横屏功能

功能背景 有些需求需要手动实现横屏功能&#xff0c;比如点击一个横屏的图标将整个页面90度翻转&#xff0c;再点击退出横屏回到正常页面。 实现思路 一拿到这个需求很可能就被吓到了&#xff0c;但简单来说&#xff0c;就是点击横屏按钮跳转一个新页面&#xff0c;通过 cs…

手动创建线程池各个参数的意义?

今天我们学习线程池各个参数的含义&#xff0c;并重点掌握线程池中线程是在什么时机被创建和销毁的。 线程池的参数 首先&#xff0c;我们来看下线程池中各个参数的含义&#xff0c;如表所示线程池主要有 6 个参数&#xff0c;其中第 3 个参数由 keepAliveTime 时间单位组成。…

【Linux】linuxCNC+Qt+Opencascade+kdl+hal 实时6轴机器人控制器

CNC机器人 程序框架 机器人模型 笔记&#xff1a; debian重启后 无法打开共享目录 最新版搜狗输入法安装后不支持中文&#xff0c;需要安装旧版本的 sogoupinyin_4.0.1.2800_x86_64.deb可用 数控机器人在哪些领域应用有优势 数控机器人在多个领域都展现出了显著的优势&#xff…

PyQt4应用程序的PDF查看器

最近因为项目需要创建一个基于PyQt4的PDF查看器应用程序&#xff0c;正常来说&#xff0c;我们可以使用PyQt4的QtWebKit模块来显示PDF文件。那么具体怎么实现呢 &#xff1f;以下就是我写的一个简单的示例代码&#xff0c;演示如何创建一个PyQt4应用程序的PDF查看器&#xff1a…

MySQL order by 语句执行流程

全字段排序 假设这个表的部分定义是这样的&#xff1a; CREATE TABLE t (id int(11) NOT NULL,city varchar(16) NOT NULL,name varchar(16) NOT NULL,age int(11) NOT NULL,addr varchar(128) DEFAULT NULL,PRIMARY KEY (id),KEY city (city) ) ENGINEInnoDB; 有如下 SQL 语…

网络分段增强网络安全的 6 种方法

网络违规事件日益增多。因此&#xff0c;实施更强大的网络安全策略以保护敏感数据免受恶意攻击变得至关重要。 其中一种技术是网络分段。它涉及将大型计算机网络架构划分为较小的、隔离的独立子网&#xff0c;以便在入侵者闯入时整个网络不受影响。 因此&#xff0c;实施网络…

CSS基本选择器

文章目录 1. ID 选择器1.1. 语法1.2. 完整写法 2. 类选择器2.1. 语法2.2. 完整写法 3. 元素选择器4. 通配选择器5. 基本选择器优先级6. 基本选择器的总结7. Google 案例 1. ID 选择器 以 # 开头&#xff0c;后面跟着 ID 名称&#xff0c;根据元素的 ID 名称选择元素&#xff0…

BBS模型层搭建

BBS模型层搭建 目录 BBS模型层搭建建表思想配置文件模型层User应用&#xff1a;Blog应用&#xff1a;Article应用&#xff1a; 建表思想 配置文件 settings.py&#xff1a; # 默认用户模型指定 AUTH_USER_MODEL User.Userinfo底部添加即可&#xff0c;用于替换默认的Abstrac…

冒泡排序,详详解解

目录 基本概念&#xff1a; 上图&#xff1a; 核心思路&#xff1a; 基本步骤&#xff1a; 关键&#xff1a; 代码核心&#xff1a; 补充&#xff1a; 代码&#xff08;规范&#xff09; &#xff1a; 代码&#xff08;优化&#xff09;&#xff1a; 今天我们不刷力扣了&…

HTML5、CSS3面试题(二)

上一章:HTML5、CSS3面试题&#xff08;一&#xff09; 哪些是块级元素那些是行内元素&#xff0c;各有什么特点 &#xff1f;&#xff08;必会&#xff09; 行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea 、selecting 块级元素&#xff1…

L1 - 006 连续因子

思路&#xff1a;1.要求最长的连续因子序列&#xff0c;我们需要知道序列的长度和序列的起点。 2.对于起点 i 来说&#xff0c;他不能超过 n 的平方根&#xff0c;在循环时从 2 到 sqrt(n) 。用到变量&#xff1a;记录个数num&#xff0c;起点start&#xff0c;最大个数maxnum…

Qt篇——QChartView获取鼠标停留位置的数值

需求&#xff1a;鼠标停留在QChartView上时&#xff0c;想要计算停留位置的数值。 一开始的方法是想要通过鼠标移动事件计算鼠标在QChartView上的坐标&#xff0c;在换算成数值&#xff0c;后来发现QChartView中除了图表数据&#xff0c;还有坐标轴与坐标轴数值标签占了高度&a…