创建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

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

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

相关文章

Android OpenGL ES详解——实例化

目录 一、实例化 1、背景 2、概念 实例化、实例数量 gl_InstanceID 应用举例 二、实例化数组 1、概念 2、应用举例 三、应用举例——小行星带 1、不使用实例化 2、使用实例化 四、总结 一、实例化 1、背景 假如你有一个有许多模型的场景&#xff0c;而这些模型的…

MyBatis-Plus的IPage分页total不正确问题

场景&#xff1a; 执行了一条连接查询的sql语句&#xff0c;进行分页后&#xff0c;total不正确问题。如下图&#xff1a; 分析&#xff1a; 分页部分代码如下&#xff1a; String sql searchSqlBuilderInstance.generateSql(); Page page new Page(commonSearchDTO.getPage…

【LeetCode】【算法】53. 最大子数组和

LeetCode 53. 最大子数组和 题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。子数组是数组中的一个连续部分。 思路 思路&#xff1a;动态规划秒了 具体递推式如…

uni-app用户登录⑫

文章目录 十九、用户登录-账户名密码登录一、前端数据整理二、使用 store 进行用户信息存储 二十、用户登录-手机验证码登录一、验证码处理二、数据发送 十九、用户登录-账户名密码登录 一、前端数据整理 定义发送函数&#xff0c;将用户信息以及本次请求的用户登录类型传递给…

每日八股——JVM组成

直接上图 JVM&#xff08;Java虚拟机&#xff09;是运行Java字节码的虚拟机。它主要由以下几个部分组成&#xff1a; 1. 类加载器&#xff08;ClassLoader&#xff09; 负责加载class文件到内存中&#xff0c;并生成对应的Class对象。类加载器分为启动类加载器、扩展类加载器…

ElementUI的日期组件中禁止选择小时、分钟、秒

分不同版本&#xff0c;如果你是elementplus&#xff0c;也就是vue3版本&#xff0c;你就直接可用方案1&#xff1b;如果你是vue2版本&#xff08;扒拉了一下源码&#xff0c;组间不支持&#xff09;&#xff0c;方案2、3都行&#xff0c;具体看自己需求。 1、‌使用:disable-…

Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在城市化进…

Linux(CentOS 7) yum一键安装mysql8

1、通过yum安装 &#xff08;1&#xff09;下载mysql 在Linux找个地方输入以下命令 wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm &#xff08;2&#xff09;安装mysql yum 仓库配置文件 [rootVM-8-15-centos ~]# sudo rpm -Uvh mysql80-c…

PySpark3:Row对象常见操作以及Row、RDD、DataFrame互相转换

目录 一、Row对象常见操作 二、Row、RDD、DataFrame互相转换 1、RDD—>DataFrame 2、DataFrame—>RDD 3、DataFrame—>Row 4、Row—>DataFrame 一、Row对象常见操作 from pyspark.sql import Row# 创建一个Row对象 row Row(name"张三", age25)# …

K8S单节点部署及集群部署

1.Minikube搭建单节点K8S 前置条件&#xff1a;安装docker&#xff0c;注意版本兼容问题 # 配置docker源 wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo# 安装docker环境依赖 yum install -y yum-utils device-m…

PyQt入门指南六十 与Python其他库的集成方法

PyQt是一个强大的GUI库&#xff0c;它可以与Python的其他库无缝集成&#xff0c;以实现更复杂的功能。以下是一些常见的集成方法和示例&#xff1a; 1. NumPy NumPy是Python中用于科学计算的基础库。您可以在PyQt应用程序中使用NumPy来处理数据和进行数值计算。 import sys …

说说软件工程中的“协程”

在软件工程中&#xff0c;协程&#xff08;coroutine&#xff09;是一种程序运行的方式&#xff0c;可以理解成“协作的线程”或“协作的函数”。以下是对协程的详细解释&#xff1a; 一、协程的基本概念 定义&#xff1a;协程是一组序列化的子过程&#xff0c;用户能像指挥家…

Android从Drawable资源Id直接生成Bitmap,Kotlin

Android从Drawable资源Id直接生成Bitmap,Kotlin val t1 System.currentTimeMillis()val bmp getBmpFromDrawId(this, R.mipmap.ic_launcher_round)Log.d("fly", "1 ${bmp?.byteCount} h${bmp?.height} w${bmp?.width} cost time${System.currentTimeMillis…

shell命令笔记

一、shell基本基础知识 1. shell命令中捕获上一个命令执行是否成功&#xff0c;通过判断 $? 是否为0&#xff0c;为0则表示成功&#xff0c;其他错误码则表示执行失败。 2. sheel命令中&#xff0c;变量赋值时默认都是字符串类型。赋值时须注意单引号与双引号的区别&#xf…

MySql 日期周处理方式

MySql 日期周处理方式 最近在做数仓相关工作&#xff0c;最近遇到 几个问题&#xff0c; 1、计算指定日期是一年中的第几周&#xff0c;周一为周的第一天 2、计算周的开始时间&#xff0c;结束时间 3、计算周对应的年 比如 2023-01-01 WEEKOFYEAR(2023-01-01) 是2022年的52周&…

多模态大模型简介

多模态大模型是机器学习领域的一个新兴趋势&#xff0c;它结合了文本、图像、音频等多种数据模态&#xff0c;以实现更全面和深入的信息理解和处理。这种模型能够处理跨模态任务&#xff0c;如图像标注、视觉问答、文本到图像的生成等&#xff0c;是人工智能领域的重要进展。 技…

微服务即时通讯系统的实现(客户端)----(1)

目录 1. 项目整体介绍1.1 项目概况1.2 界面预览和功能介绍1.3 技术重点和服务器架构 2. 项目环境搭建2.1 安装Qt62.3 安装vcpkg2.3 安装protobuf2.4 构建项目2.5 配置CMake属性 3. 项目核心数据结构的实现3.1 创建data.h存放核心的类3.2 工具函数的实现3.3 创建编译开关 4. 界面…

STM32WB55RG开发(3)----生成 BLE 程序连接手机APP

STM32WB55RG开发----3.生成 BLE 程序连接手机APP 概述硬件准备视频教学样品申请源码下载参考程序选择芯片型号配置时钟源配置时钟树RTC时钟配置RF wakeup时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置结果演示 概述 本项目旨…

MongoDB自定义顺序排序

自定义顺序排序方法 以下是在MongoDB中实现自定义顺序排序的方法&#xff1a; 在数据集中添加一个自定义字段。使用update命令或$set操作符为每个文档添加自定义字段。在我们的例子中&#xff0c;我们可以通过以下命令为每个学生添加”grade”字段&#xff1a; db.students.…

Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了玩家属性栏&#xff0c;仓库&#xff0c;物品栏UI的制作 UI_StatSlot.cs 这个脚本是用来在Unity的UI上显示玩家属性&#xf…