创建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
开发步骤:1.创建一个vue项目,2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm 1.创建一个vue项目 npm create vuelatest 生成了vue项目之后,得到了以下结构。 在src下创建个plugins目录。用于存放开发的…...
【Android Compose原创组件】可拖动滚动条的完美实现
项目背景 我在使用安卓Compose开发自己的【JK管理器】的过程中,很多地方都需要使用滚动条,在Github上也有实现的比较好,但是大多都是基于View(我要的是Compose啊)。 在研究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文档,如PowerPoint演示文稿,是提高效率和创造力的重要手段。设置PowerPoint幻灯片背景不仅能够增强演示文稿的视觉吸引力,还能帮助传达特定的情感或信息,使观众更加投入。通过编程方式批量修改幻灯片背…...
Restful API接⼝简介及为什么要进⾏接⼝压测
一、RESTful API简介 在现代Web开发中,RESTful API已经成为一种标准的设计模式,用于构建和交互网络应用程序。本文将详细介绍RESTful API的基本概念、特点以及如何使用它来设计高效的API接口。 1. 基于协议 HTTP 或 HTTPS RESTful API通常使用HTTP&am…...
[pyspark] pyspark中如何修改列名字
使用 .withColumnRenamed 来重命名,直接看demo: from pyspark.sql import SparkSessionspark SparkSession.builder.appName("example").getOrCreate()data [("Alice", 1, 200),("Bob", 2, 300),("Charlie",…...
掌握 Spring Boot 的最佳方法 – 学习路线图
在企业界,人们说“Java 永垂不朽!”。但为什么呢?Java 仍然是开发企业应用程序的主要平台之一。大型公司使用企业应用程序来赚钱。这些应用程序具有高可靠性要求和庞大的代码库。根据Java开发人员生产力报告,62% 的受访开发人员使…...
element-ui】使用el_upload上传文件无法动态修改action
问题:最近在使用el_upload上传文件时,发现无法动态修改action的值,进行提交时,caseId2还是默认值null 原因:el-upload的先执行上传,后执行action里的响应,也就是赋值等操作。 解决方法&#x…...
如何查看电脑支持的最大内存
如何查看电脑支持的最大内存 要查看电脑支持的最大内存容量,可以通过以下几种方法: 一、使用Windows命令查询 打开命令提示符:按下“WinR”键,打开运行窗口,输入“cmd”,然后点击确定。输入查询命令&…...
24 年第十届数维杯国际数模竞赛赛题浅析
本次万众瞩目的数维杯国际大学生数学建模赛题已正式出炉,无论是赛题难度还是认可度,该比赛都是数模届的独一档,含金量极高,可以用于综测加分、保研、简历添彩等各方面。考虑到大家解题实属不易,为了帮助大家取得好成绩…...
Dubbo 3.x源码(25)—Dubbo服务引用源码(8)notify订阅服务通知更新
基于Dubbo 3.1,详细介绍了Dubbo服务的发布与引用的源码。 此前我们学习了接口级的服务引入订阅的refreshInterfaceInvoker方法,当时还有最为关键的notify服务通知更新的部分源码没有学习,本次我们来学习notify通知本地服务更新的源码。 Dubb…...
排序算法 -计数排序
文章目录 1. 计数排序(Counting Sort)1.1 简介1.2 计数排序的步骤1.3 计数排序C语言实现注释说明: 1.4 时间复杂度1.5 空间复杂度 1. 计数排序(Counting Sort) 1.1 简介 计数排序(Counting Sortÿ…...
Java学习,基本数据类型
变量就是申请内存来存储值,当创建变量的时候,需要在内存中申请空间。内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据。Java 提供了八种基本数据类型,这些类型可以分为四大类:整数类型…...
单片机GPIO中断+定时器 软件串口通信
单片机GPIO中断定时器 软件串口通信 解决思路代码示例 解决思路 串口波特率9600bps,每个bit约为1000000us/9600104.16us; 定时器第一次定时时间设为52us即半个bit的时间,其目的是偏移半个bit时间,之后的每104us采样并读取1bit数据。使得采样…...
elementui el-table中给表头 el-table-column 加一个鼠标移入提示说明
前言 在使用el-table 表格中有些表格的表头需要加入一些提示,鼠标移入则出现提示,非常实用,我是通过el-table中的el-tooltip实现的,以下的效果预览 代码实现 <el-table ref"multipleTable" :data"data"…...
NVR小程序接入平台/设备EasyNVR多个NVR同时管理设备接入:海康NVR 3.0提示不在线如何处理?
在视频监控领域,设备的兼容性和互操作性一直是用户关注的重点。海康NVR管理平台EasyNVR作为一款轻量级的视频监控平台,凭借其强大的兼容性、可扩展性和丰富的功能,成为了公共安全领域“云平台”解决方案的杰出代表。然而,在实际应…...
datawhale11月组队学习 模型压缩技术2:PyTorch模型剪枝教程
文章目录 一、 prune模块简介1.1 常用方法1.2 剪枝效果1.3 二、三、四章剪枝测试总结 二、局部剪枝(Local Pruning)2.1 结构化剪枝2.1.1 对weight进行随机结构化剪枝(random_structured)2.1.2 对weight进行迭代剪枝(范…...
SOL链上Meme生态的崛起与未来#Dapp开发#链游#交易所#公链搭建
近年来,随着区块链技术的普及和NFT文化的流行,meme(网络迷因)逐渐成为区块链生态中的重要组成部分。meme不仅是一种互联网文化符号,更逐步渗透进了去中心化金融(DeFi)、NFT和元宇宙等多个领域&a…...
部署Apache Doris
官方文档:https://doris.apache.org/zh-CN/installing/compilation.html 一、编译 使用 Docker 开发镜像编译(推荐) 1.拉取镜像 #下载 Docker 最新主干版本代码,会随主干版本不断更新。 $ docker pull apache/incubator-doris:…...
ElasticSearch-全文检索(一)基本介绍
简介 Elasticsearch:官方分布式搜索和分析引擎 | Elastic 全文搜索属于最常见的需求,开源的Elasticsearch是目前全文搜索引擎的首选。 它可以快速地储存、搜索和分析海量数据。维基百科、StackOverflow、Github都采用它 Elastic的底层是开源库Lucene。但…...
突破安卓视频解析壁垒:LAMDA框架实现流媒体捕获与自动化提取全指南
突破安卓视频解析壁垒:LAMDA框架实现流媒体捕获与自动化提取全指南 【免费下载链接】lamda ⚡️ Android reverse engineering & automation framework | 史上最强安卓抓包/逆向/HOOK & 云手机/远程桌面/自动化辅助框架,你的工作从未如此简单快捷…...
Sentinel-2 Level-2A数据怎么用?从QA60波段解读到实战:去云、计算NDVI/ARVI并导出GeoTIFF
Sentinel-2 Level-2A数据实战指南:从QA60波段解析到植被指数计算全流程 当第一次打开Sentinel-2 Level-2A数据时,很多研究者会被那些看似晦涩的质量波段搞得一头雾水。记得我刚开始处理这些数据时,就曾因为忽略了QA60波段的重要性,…...
Kimi-VL-A3B-Thinking开源大模型实操:模型微调适配垂直领域数据
Kimi-VL-A3B-Thinking开源大模型实操:模型微调适配垂直领域数据 1. 引言:为什么你需要关注这个模型? 如果你正在寻找一个既能看懂图片,又能像人一样思考的多模态模型,那么Kimi-VL-A3B-Thinking绝对值得你花时间了解。…...
OpenClaw浏览器自动化:Qwen3-32B镜像实现竞品数据抓取与可视化
OpenClaw浏览器自动化:Qwen3-32B镜像实现竞品数据抓取与可视化 1. 为什么选择OpenClaw做竞品分析 去年在做产品迭代时,我每周都要手动收集竞品数据。从打开十几个网页、复制粘贴数据到Excel,再到生成对比图表,整个过程至少耗费3…...
遥感影像裁剪避坑指南:如何用ENVI5.3的Subset功能精准提取县区数据(含背景值设置技巧)
遥感影像裁剪避坑指南:ENVI5.3 Subset功能深度解析与实战技巧 当你在处理县域尺度的遥感影像分析时,是否遇到过裁剪后图像边缘出现黑边、数据丢失或坐标错位的问题?这些看似简单的操作细节,往往成为影响后续分析精度的关键因素。本…...
Clawdbot汉化版开源可部署:MIT协议+全栈TypeScript+模块化Agent设计解析
Clawdbot汉化版开源可部署:MIT协议全栈TypeScript模块化Agent设计解析 1. 项目概述与技术特色 Clawdbot是一个开源的智能对话助手系统,采用MIT协议发布,允许用户自由使用、修改和分发。这个项目的核心价值在于让用户能够在主流即时通讯平台…...
别再只用欧氏距离了!用Python+NumPy实战马氏距离异常检测(附卡方分布阈值设定)
用Python实战马氏距离异常检测:从理论到工业级实现 在数据分析领域,距离度量是许多算法的基石。当数据维度升高且特征间存在相关性时,传统的欧氏距离就像用一把没有刻度的尺子测量复杂空间——它无法捕捉变量间的相互作用。想象一下金融交易监…...
三维任意形状随机骨料matlab生成:基于映射网格的属性赋予方法
三维任意形状随机骨料matlab生成,基于映射网格(背景网格法)进行骨料、砂浆、界面属性的赋予。在混凝土材料细观建模中,生成真实的三维骨料结构是个技术活。今天咱们就来聊聊如何用Matlab造出形状各异的随机骨料,再通过…...
STM32F103C8T6连接HC-06蓝牙模块的完整避坑指南:从AT指令调试到数据收发异常处理
STM32F103C8T6与HC-06蓝牙模块实战避坑手册:从AT指令异常到数据收发的深度解决方案 当你第一次尝试用STM32F103C8T6驱动HC-06蓝牙模块时,是否遇到过这样的场景:AT指令发送后如同石沉大海,串口调试助手始终一片空白;或是…...
EVA-01开发者案例:Qwen2.5-VL-7B集成至MAGI类AI平台实现多源视觉融合
EVA-01开发者案例:Qwen2.5-VL-7B集成至MAGI类AI平台实现多源视觉融合 1. 引言:当视觉AI遇见机甲美学 想象一下,你正在处理一份复杂的市场分析报告,里面混杂着数据图表、产品照片和手写笔记。传统的AI工具要么只能看文字…...
