创建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。但…...
Git内部原理浅析:对象、引用与分支合并策略
Git内部原理浅析:对象、引用与分支合并策略 在软件开发中,Git已成为版本控制系统的标准工具,但其强大的功能背后隐藏着精妙的设计原理。理解Git的内部机制,尤其是对象模型、引用系统以及分支合并策略,不仅能提升开发效…...
Linux终极生态指南:5个实战技巧打造高效开源工作流
Linux终极生态指南:5个实战技巧打造高效开源工作流 【免费下载链接】awesome-linux :penguin: A list of awesome projects and resources that make Linux even more awesome. :penguin: 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-linux Linux生…...
Linux文件系统驱动实战:exfat-nofuse跨平台存储解决方案全解析
Linux文件系统驱动实战:exfat-nofuse跨平台存储解决方案全解析 【免费下载链接】exfat-nofuse Android ARM Linux non-fuse read/write kernel driver for exFat and VFat Android file systems 项目地址: https://gitcode.com/gh_mirrors/ex/exfat-nofuse 开…...
OpenClaw安全防护指南:GLM-4.7-Flash执行权限管控实践
OpenClaw安全防护指南:GLM-4.7-Flash执行权限管控实践 1. 为什么需要安全防护? 上周我在调试OpenClaw自动化脚本时,差点酿成大祸。当时想让GLM-4.7-Flash模型帮我整理下载目录里的PDF文件,结果模型误解了指令,竟然试…...
403 Forbidden错误排查:Qwen3-0.6B-FP8 API服务部署中的常见网络与权限问题解决
403 Forbidden错误排查:Qwen3-0.6B-FP8 API服务部署中的常见网络与权限问题解决 部署好一个AI模型服务,满心欢喜地打开浏览器或调用客户端,结果屏幕上冷冰冰地弹出一个“403 Forbidden”,这种感觉就像兴冲冲去赴约,却…...
Flutter开发踩坑记:CocoaPods安装失败全流程解决方案(含Ruby版本升级)
Flutter开发实战:CocoaPods安装失败的系统级解决方案 当你满怀期待地运行flutter doctor准备大展身手时,屏幕上突然跳出"CocoaPods not installed"的红色警告,这种挫败感每个Flutter开发者都深有体会。不同于简单的"安装-运行…...
EagleEye效果实测:在JetPack 6.0 + Orin AGX上实现15ms推理的边缘部署方案
EagleEye效果实测:在JetPack 6.0 Orin AGX上实现15ms推理的边缘部署方案 如果你正在为边缘设备寻找一个又快又准的目标检测方案,那么今天的内容可能会让你眼前一亮。我们刚刚在NVIDIA Jetson Orin AGX上,基于最新的JetPack 6.0系统…...
深入解析CAN总线通信原理与CANoe实战开发指南
1. CAN总线通信原理深度剖析 CAN总线(Controller Area Network)是现代汽车电子系统中不可或缺的神经脉络。我第一次接触CAN总线是在2013年参与某新能源车项目时,当时就被它精巧的设计所震撼。与常见的串口通信不同,CAN采用差分信号…...
React Native PagerView入门指南:5分钟快速搭建页面切换组件
React Native PagerView入门指南:5分钟快速搭建页面切换组件 【免费下载链接】react-native-pager-view React Native wrapper for the Android ViewPager and iOS UIPageViewController. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-pager-view …...
QMCDecode终极指南:3步破解QQ音乐加密格式,实现音频自由播放
QMCDecode终极指南:3步破解QQ音乐加密格式,实现音频自由播放 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac,qmc0,qmc3转mp3, mflac,mflac0等转flac),仅支持macOS,可自动识别到QQ音乐下载目录…...
