发布组件到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…

css3常见选择器

使用工具 Visual Studio Code 1.CSS3基础选择器 1.1 标签选择器 1.2.1 标签选择器的语法 一个完整的HTML5页面是由很多不同的标签组成的&#xff0c;而标签选择器则决定标签应采用的CSS样式&#xff0c;语法如下:标签名{ 属性1&#xff1a;属性值1&#xff1b; 属性2&…

Vscode 修改C++版本

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

python 读取pdf 将每页转成jpg

需要安装fitz pip install PyMuPDF 这里我发现了问题,默认安装最新版本1.21.x 但是不支持大部分网上的api 所以分开两部分 1.21.x的 import fitz # PyMuPDF from PIL import Imagedef extract_images_from_tiff(tiff_path, output_folder):# 打开 TIFF 文件pdf_document f…

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

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

基于grafana+elk等开源组件的 云服务监控大屏架构

本套大屏,在某云服务大规模测试环境,良好运行3年. 本文主要展示这套监控大屏的逻辑架构.不做具体操作与配置的解释. 监控主要分为三部分: 数据展示部分数据存储数据采集 1. 数据展示 数据展示方面主要使用grafana 2. 数据存储 根据数据种类和特性和用途的不同,本套监控采…

Intelli idea 自带maven路径和配置

自带maven位于&#xff1a;plugins/maven/lib/maven3 Mac配置maven环境变量&#xff1a; #maven export MAVEN_HOME/maven根路径 export PATH$MAVEN_HOME/bin:$PATH#刷新环境变量 source ~/.bash_profile#查看maven版本 mvn -version#查看依赖树 mvn dependency:tree 配置ma…

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…

MySQL模块---安装并配置

1. 在项目中操作数据库的步骤 ① 安装操作 MySQL 数据库的第三方模块&#xff08;mysql&#xff09; ② 通过 mysql 模块链接到 MySQL 数据库 ③ 通过 mysql 模块执行 SQL 语句 2. 安装 mysql 模块 这里要安装的是 mysql2 也就是 mysql 8.0后面的版本 npm init -y npm…

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

今天我们学习线程池各个参数的含义&#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…

介绍一下redis中底层磁盘及IO模型,数据持久化机制,哨兵机制

底层磁盘及IO模型&#xff1a; Redis中的数据存储在内存中&#xff0c;但为了保证数据的持久化&#xff0c;Redis还提供了两种数据持久化方式&#xff1a;RDB&#xff08;Redis DataBase&#xff09;和AOF&#xff08;Append-Only File&#xff09;。 RDB&#xff1a;RDB是一种…

PyQt4应用程序的PDF查看器

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

SQL笔记 -- 黑马程序员

SQL目录 文章目录 SQL目录一、SQL分类1、DDL2、数据类型3、DML4、DQL1&#xff09;基本查询2&#xff09;条件查询3&#xff09;聚合函数查询4&#xff09;分组查询5&#xff09;排序查询6&#xff09;分页查询 5、DCL 一、SQL分类 分类说明DDL数据定义语言&#xff0c;用来定…

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 语…