当前位置: 首页 > news >正文

创建vue插件,发布npm

开发步骤:1.创建一个vue项目,2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm

1.创建一个vue项目

npm create vue@latest

  生成了vue项目之后,得到了以下结构。

 在src下创建个plugins目录。用于存放开发的插件。

2.开发一个组件

(1)现在可以开发插件了。在plugins目录下创建一个vue组件。TestButton.vue如下:

<template><div><button>插件中的按钮</button></div>
</template><script lang='ts' setup ><script>

3.注册成插件

在plugins目录下创建一个install.ts。用于注册组件。注册组件需要导出个install方法。将组件注册到app中。具体可以参照vuejs官网。

import TestButton from "./TestButton.vue"export default {install: (app:any){app.compontent(TestButton.name,TestButton)}
}

4.vite和package.json配置

(1)配置vite。指定打包的入口文件,以及输出。


import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({// 用于构建 build:{lib:{// 构建的入口。这里需要设置为刚才创建的plugins下的install.tsentry:"./src/plugins/install.ts",name:"TestUI",fileName: (format) => `TestUI.${format}.js`, // 输出文件名// 使用的打包模式formats:["umd"],},rollupOptions:{// 将 Vue 标记为外部依赖external:['vue'], output:{globals:{vue:"Vue" // 在 UMD 构建中,Vue 被认为是全局变量}}}},plugins: [vue(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

(2)进行打包 

npm run build

(3)配置package.json。

{"name": "TestUI","version": "1.0.25","private": false,"type": "module",// 入口文件,设置为上一步打包完成后生成的js文件"main": "./dist/ysjui.umd.cjs", "module": "./dist/ysjui.umd.cjs",// 指定dist和lib发布到npm包中"files": ["dist","lib"],"author": {"name": "xxx"},// 其他的配置项...
}

5.发布至npm

npm publish

相关文章:

创建vue插件,发布npm

开发步骤&#xff1a;1.创建一个vue项目&#xff0c;2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm &#xff11;.创建一个vue项目 npm create vuelatest 生成了vue项目之后&#xff0c;得到了以下结构。 在src下创建个plugins目录。用于存放开发的…...

【Android Compose原创组件】可拖动滚动条的完美实现

项目背景 我在使用安卓Compose开发自己的【JK管理器】的过程中&#xff0c;很多地方都需要使用滚动条&#xff0c;在Github上也有实现的比较好&#xff0c;但是大多都是基于View&#xff08;我要的是Compose啊&#xff09;。 在研究Android 官方示例项目 nowinandroid 中&…...

【模块一】kubernetes容器编排进阶实战之资源管理核心概念

kubernetes 资源管理核心概念 k8s的设计理念—分层架构 CRI-container runtime interface-容器运行接口 CNI-container network interface-容器网络接口 CSI-container storage interface-容器存储接口 k8s的设计理念—API设计原则 https://www.kubernetes.org.cn/kubernete…...

用Python设置PowerPoint幻灯片背景

使用Python自动化处理Office文档&#xff0c;如PowerPoint演示文稿&#xff0c;是提高效率和创造力的重要手段。设置PowerPoint幻灯片背景不仅能够增强演示文稿的视觉吸引力&#xff0c;还能帮助传达特定的情感或信息&#xff0c;使观众更加投入。通过编程方式批量修改幻灯片背…...

Restful API接⼝简介及为什么要进⾏接⼝压测

一、RESTful API简介 在现代Web开发中&#xff0c;RESTful API已经成为一种标准的设计模式&#xff0c;用于构建和交互网络应用程序。本文将详细介绍RESTful API的基本概念、特点以及如何使用它来设计高效的API接口。 1. 基于协议 HTTP 或 HTTPS RESTful API通常使用HTTP&am…...

[pyspark] pyspark中如何修改列名字

使用 .withColumnRenamed 来重命名&#xff0c;直接看demo&#xff1a; from pyspark.sql import SparkSessionspark SparkSession.builder.appName("example").getOrCreate()data [("Alice", 1, 200),("Bob", 2, 300),("Charlie",…...

掌握 Spring Boot 的最佳方法 – 学习路线图

在企业界&#xff0c;人们说“Java 永垂不朽&#xff01;”。但为什么呢&#xff1f;Java 仍然是开发企业应用程序的主要平台之一。大型公司使用企业应用程序来赚钱。这些应用程序具有高可靠性要求和庞大的代码库。根据Java开发人员生产力报告&#xff0c;62% 的受访开发人员使…...

element-ui】使用el_upload上传文件无法动态修改action

问题&#xff1a;最近在使用el_upload上传文件时&#xff0c;发现无法动态修改action的值&#xff0c;进行提交时&#xff0c;caseId2还是默认值null 原因&#xff1a;el-upload的先执行上传&#xff0c;后执行action里的响应&#xff0c;也就是赋值等操作。 解决方法&#x…...

如何查看电脑支持的最大内存

如何查看电脑支持的最大内存 要查看电脑支持的最大内存容量&#xff0c;可以通过以下几种方法&#xff1a; 一、使用Windows命令查询 打开命令提示符&#xff1a;按下“WinR”键&#xff0c;打开运行窗口&#xff0c;输入“cmd”&#xff0c;然后点击确定。输入查询命令&…...

24 年第十届数维杯国际数模竞赛赛题浅析

本次万众瞩目的数维杯国际大学生数学建模赛题已正式出炉&#xff0c;无论是赛题难度还是认可度&#xff0c;该比赛都是数模届的独一档&#xff0c;含金量极高&#xff0c;可以用于综测加分、保研、简历添彩等各方面。考虑到大家解题实属不易&#xff0c;为了帮助大家取得好成绩…...

Dubbo 3.x源码(25)—Dubbo服务引用源码(8)notify订阅服务通知更新

基于Dubbo 3.1&#xff0c;详细介绍了Dubbo服务的发布与引用的源码。 此前我们学习了接口级的服务引入订阅的refreshInterfaceInvoker方法&#xff0c;当时还有最为关键的notify服务通知更新的部分源码没有学习&#xff0c;本次我们来学习notify通知本地服务更新的源码。 Dubb…...

排序算法 -计数排序

文章目录 1. 计数排序&#xff08;Counting Sort&#xff09;1.1 简介1.2 计数排序的步骤1.3 计数排序C语言实现注释说明&#xff1a; 1.4 时间复杂度1.5 空间复杂度 1. 计数排序&#xff08;Counting Sort&#xff09; 1.1 简介 计数排序&#xff08;Counting Sort&#xff…...

Java学习,基本数据类型

变量就是申请内存来存储值&#xff0c;当创建变量的时候&#xff0c;需要在内存中申请空间。内存管理系统根据变量的类型为变量分配存储空间&#xff0c;分配的空间只能用来储存该类型数据。Java 提供了八种基本数据类型&#xff0c;这些类型可以分为四大类&#xff1a;整数类型…...

单片机GPIO中断+定时器 软件串口通信

单片机GPIO中断定时器 软件串口通信 解决思路代码示例 解决思路 串口波特率9600bps,每个bit约为1000000us/9600104.16us&#xff1b; 定时器第一次定时时间设为52us即半个bit的时间&#xff0c;其目的是偏移半个bit时间&#xff0c;之后的每104us采样并读取1bit数据。使得采样…...

elementui el-table中给表头 el-table-column 加一个鼠标移入提示说明

前言 在使用el-table 表格中有些表格的表头需要加入一些提示&#xff0c;鼠标移入则出现提示&#xff0c;非常实用&#xff0c;我是通过el-table中的el-tooltip实现的&#xff0c;以下的效果预览 代码实现 <el-table ref"multipleTable" :data"data"…...

NVR小程序接入平台/设备EasyNVR多个NVR同时管理设备接入:海康NVR 3.0提示不在线如何处理?

在视频监控领域&#xff0c;设备的兼容性和互操作性一直是用户关注的重点。海康NVR管理平台EasyNVR作为一款轻量级的视频监控平台&#xff0c;凭借其强大的兼容性、可扩展性和丰富的功能&#xff0c;成为了公共安全领域“云平台”解决方案的杰出代表。然而&#xff0c;在实际应…...

datawhale11月组队学习 模型压缩技术2:PyTorch模型剪枝教程

文章目录 一、 prune模块简介1.1 常用方法1.2 剪枝效果1.3 二、三、四章剪枝测试总结 二、局部剪枝&#xff08;Local Pruning&#xff09;2.1 结构化剪枝2.1.1 对weight进行随机结构化剪枝&#xff08;random_structured&#xff09;2.1.2 对weight进行迭代剪枝&#xff08;范…...

SOL链上Meme生态的崛起与未来#Dapp开发#链游#交易所#公链搭建

近年来&#xff0c;随着区块链技术的普及和NFT文化的流行&#xff0c;meme&#xff08;网络迷因&#xff09;逐渐成为区块链生态中的重要组成部分。meme不仅是一种互联网文化符号&#xff0c;更逐步渗透进了去中心化金融&#xff08;DeFi&#xff09;、NFT和元宇宙等多个领域&a…...

部署Apache Doris

官方文档&#xff1a;https://doris.apache.org/zh-CN/installing/compilation.html 一、编译 使用 Docker 开发镜像编译&#xff08;推荐&#xff09; 1.拉取镜像 #下载 Docker 最新主干版本代码&#xff0c;会随主干版本不断更新。 $ docker pull apache/incubator-doris:…...

ElasticSearch-全文检索(一)基本介绍

简介 Elasticsearch&#xff1a;官方分布式搜索和分析引擎 | Elastic 全文搜索属于最常见的需求&#xff0c;开源的Elasticsearch是目前全文搜索引擎的首选。 它可以快速地储存、搜索和分析海量数据。维基百科、StackOverflow、Github都采用它 Elastic的底层是开源库Lucene。但…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...