基于vue3+vite+ts,使用nexus发布组件库

news2024/9/22 7:28:18

1、前提条件

        已部署nexus3,可参考:

        Ubuntu部署和体验Nexus3-腾讯云开发者社区-腾讯云

        代理设置:

        【Nexus】通过Nexus搭建Npm私库_猫巳的博客-CSDN博客

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化。

nexus的全称是Nexus Repository Manager,是Sonatype公司的一个产品。它是一个强大的仓库管理器,极大地简化了内部仓库的维护和外部仓库的访问。

主要用它来搭建公司内部的maven私服。但是它的功能不仅仅是创建maven私有仓库这么简单,还可以作为nuget、docker、npm、bower、pypi、rubygems、git lfs、yum、go、apt等的私有仓库.

创建一个hosted:

http://IP:8081/repository/npm-hosted/

创建三个proxy:

name:npmmirror (https://registry.npmmirror.com/)

name:npm_taobao (https://registry.npm.taobao.org/)

name:npm_npmjs (https://registry.npmjs.org)

 创建一个group,并将以上四个加入。

http://IP:8081/repository/npm-public/

2、介绍几个命令

    nrm(node registry manager)指令, 是针对于 npm 改变下载http://IP:8081/repository/npm-public/的。

npm config get registry // 查看npm当前镜像源

yarn config get registry  // 查看yarn当前镜像源

 3、新建一个vite工程,并自定组件(UploadSingleFileDialog)结构目录如下:

3.1 组件导出

import {App} from "vue";
import UploadSingleFileDialog from "./uploadSingleFileDialog/src/upload-single-file-dialog.vue";
export {
	UploadSingleFileDialog
}
export default {
	install: (app: App) => {
		app.component('UploadSingleFileDialog', UploadSingleFileDialog)
	}
}

 3.2 依赖

@types/node 使用resolve解析项目路径
vite-plugin-dts 1.4.1 自动生成ts声明文件

3.3  库模式

当这个库要进行发布构建时,请使用 build.lib 配置项。参考详情:构建生产版本 | Vite 官方中文文档

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
import {resolve} from 'path'

export default defineConfig({
	plugins: [vue(),dts()],
	//构件库
	build: {
		outDir: 'lib',
		lib: {
			entry: resolve(__dirname,'./packages/components/index.ts'),
			name: 'vue3-ui',
			fileName: 'vue3-ui'
		},
		rollupOptions: {
			// 确保外部化处理那些你不想打包进库的依赖
			external: ['vue'],
			output: {
				// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
				globals: {
					vue: 'Vue',
				},
			}
		}
	}
})

3.4 package.json 配置

{
  "name": "vue3-ui",
  "private": false,
  "version": "0.0.19",
  "type": "module",
  "main": "./lib/vue3-ui.umd.js",
  "module": "./lib/vue3-ui.js",
  "exports": {
    ".": {
      "import": "./lib/vue3-ui.js",
      "require": "./lib/vue3-ui.umd.cjs"
    }
  },
  "files": ["lib/*","packages/*","package.json"],
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "publishConfig": {
    "registry": "http://120.26.1.87:8081/repository/npm-hosted/"
  },
  "dependencies": {
    "element-plus": "^2.3.7",
    "unplugin-vue-define-options": "^1.3.8",
    "vite-plugin-dts": "^3.0.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^20.3.3",
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

3.5 发版

发版之前检查是否启动了nexus:

查看容器列表:docker ps -a
启动新容器:docker run -d -p 8081:8081  --name nexus -v /usr/local/work/nexus-data:/nexus-data sonatype/nexus3:3.19.1
启动已存在容器:docker restart 9c64754c648d

发版:

登录:npm login -registry=http://120.26.1.87:8081/repository/npm-hosted/
构建:npm run build(before save all codes,and update version)
发布:npm publish

测试:

新建一个工程,引入组件库,添加并切换源:

npm use 源名称(type为group)
npm install
npm update //如有新版本发布

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

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

相关文章

Java --- springboot3之可观测性

目录 一、可观测性 二、定制健康监控的端点 三、定制metrics 四、整合PrometheusGrafana 一、可观测性 导入pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></d…

如何从PCB上直接启动Power DC直流压降仿真分析工具

如何从PCB上直接启动Power DC直流压降仿真分析工具 POWER DC的启动除了可以通过POWER DC.exe直接启动外,还可以直接通过Allegro的PCB界面直接启动,二者软件是支持关联的。如何启动,具体操作如下 用166或者172版本打开PCB点击File点击Change Edi

JVM源码剖析之JVM层面调用Java方法

先看以下2个案例。 Runnable runnable () -> {System.out.println(1); }; new Thread(runnable).start(); 为什么调用Thread的start方法就能执行Runnable的代码&#xff1f; public static void main(String[] args) {System.out.println(1); } 作为Java开发者&#x…

基于差速驱动移动基座的三维变型机器人轨迹优化

在执行任务时&#xff0c;服务机器人的功能结构变化可能会限制其自主导航能力&#xff0c;从而影响其行动力。本文的研究&#xff0c;旨在解决复杂三维环境中可变形机器人的轨迹规划问题&#xff0c;特别是应用最为广泛的基于差速驱动移动基座的移动机器人的轨迹规划。 这种全…

如何下载一个网站的全部网页文件 如何极速下载网页上的文件

许多网站上都有非常多的内容&#xff0c;一个个下载比较麻烦&#xff0c;那么我们如何下载一个网站的全部网页文件&#xff1f;我们可以使用下载软件抓取整个站点上检索出所有内容&#xff0c;然后通过过滤器选择自己需要的内容。如何极速下载网页上的文件&#xff1f;我们可以…

电脑-问题

如果使用了小米路由器&#xff0c;有望 但是平凡跳转到miwifi进行检查&#xff0c;或者显示证书问题 在浏览器设置里搜索dns&#xff0c;将 确定如何通过安全连接来连接到网站后面部分改成自定义&#xff1a; https://dns.alidns.com/dns-query 主要原因是&#xff1a; edge新…

C++图形开发(4):下落的小球

文章目录 1.小球自上而下依次出现2.下落的小球低配版3.下落的小球高配版 1.小球自上而下依次出现 首先&#xff0c;我们来使小球自上而下依次出现&#xff1a; 分析&#xff1a;要使小球自上而下依次出现&#xff0c;也就是指在一个小球出现之后让程序暂停一段时间&#xff0c…

基于单片机电子密码锁射频卡识别指纹门禁密码锁系统的设计与实现

功能介绍 通过指纹进行开锁或者是按键输入当前的密码&#xff0c;修改密码&#xff0c;对IC卡可以进行注册&#xff0c;删除。当有RFID卡进入到读卡器的读卡范围内时&#xff0c;则会自动读取卡序列号&#xff0c;单片机根据卡的序列号对卡进行判断。若该卡是有效卡&#xff0c…

【 SVG 】二、SVG 容器元素

一、本文概述 本文所介绍的 svg 中元素&#xff0c;通常不会直接作为直接展示元素&#xff0c;而是配合其他基础元素&#xff0c;以实现指定功能的图层组&#xff0c;本文围绕 svg 常用容器元素&#xff0c;进行实战应用&#xff1b; 二、 SVG 容器元素&#xff08;常用&#x…

「软件测试」最全面试问题和回答,全文背熟不拿下offer算我输

一般要应聘关于测试的工作&#xff0c;面试题会不会很难?下面小编整理了软件测试面试题及答案&#xff0c;欢迎参考! 一、引言 1.1 文档目的 本次文档是为了收集在面试中遇到的一问题与常见的一些答案并不是唯一答案 二、职业规划 2.1 简单的自我介绍下 面试宫&#xff…

层层剥开Transformer;Windows Copilot初版非常简陋

&#x1f989; AI新闻 &#x1f680; 微软Win11引入Windows Copilot功能&#xff0c;但初版非常简陋 摘要&#xff1a;微软在Win11 Build 23493预览版更新中引入了Windows Copilot功能&#xff0c;该功能在任务栏上新增了一个图标按钮。点击按钮后&#xff0c;屏幕右侧会跳出…

10_Activiti7

工作流(workflow)系统 具有工作流的系统,使用的专门的建模语言(BPMN)定义 通过计算机对业务流程自动化执行管理 使用传统方式实现 ​ 代码工作量大,若流程发生改变的话,编写 的代码也会发生响应的改变 工作流引擎 按照BPMN规范进行部署,将业务和节点的流程进行分离 没有…

oracle rowscn 简单记录

可以通过ROWSCN 侦测row是否有变化&#xff0c;但需要注意&#xff1a; 默认是一个block的scn 相同可以通过create table ROWDEPENDENCIES 在每行上记录无论哪种模式&#xff0c;ROW SCN是一个大致值&#xff0c;不是准确值 NOROWDEPENDENCIES | ROWDEPENDENCIES This claus…

软件测试丨常用测试策略与测试手段

测试策略是指在特定环境约束之下&#xff0c;描述软件开发周期中关于测试原则、方法、方式的纲要&#xff0c;并阐述了它们之间如何配合&#xff0c;以高效地减少缺陷、提升质量。 测试策略中需要描述测试类型与测试目标以及测试方法&#xff0c;准入准出的条件&#xff0c;以…

初学spring5(六)静态/动态代理模式

学习回顾&#xff1a;初学spring5&#xff08;五&#xff09;使用注解开发 一、代理模式 为什么要学习代理模式&#xff0c;因为AOP的底层机制就是动态代理&#xff01; 代理模式&#xff1a; 静态代理动态代理 学习aop之前 , 我们要先了解一下代理模式&#xff01; 二、静态代…

【前端】element button鼠标点击按钮更改样式

目录 一、实现效果二、代码如下&#x1f680;写在最后 一、实现效果 二、代码如下 <span><el-button type"text"><img src"../../../../../src/assets/slice/question.png" style"font-size: 14px;margin-bottom: 0.26rem">&l…

安全响应中心 — 垃圾邮件事件报告(6.28)

2023年6月 第四周 样本概况 ✅ 类型1&#xff1a;伪造正常转发邮件&#xff08;链接&#xff09; 钓鱼邮件一直是邮件防护绕不开的话题。近日安全团队收到了一批钓鱼邮件&#xff0c;发送者将正常邮件内容和钓鱼内容拼凑在一起&#xff0c;将一封钓鱼邮件伪装成经过转发的正…

TypeScript 总结

文章目录 TypeScript 总结概述运行ts文件方式一方式二 基础声明变量类型数组元组联合类型取值限制 枚举类型any & unknownvoid & undefined类型适配 面向对象函数普通函数箭头函数可选参数默认参数 对象创建对象对象的类型限制 类和接口泛型简单使用多个泛型默认泛型类…

react基础-React原理揭秘React路由基础

React原理揭秘 目标 能够说出React组件的更新机制能够对组件进行性能优化能够说出虚拟DOM和DIff算法 组件更新机制 setState() 的两个作用 修改state更新组件 过程&#xff1a;父组件重新渲染时&#xff0c;也会重新渲染子组件&#xff0c;但只会渲染当前组件子树&#xff…

BUUCTF Cipher 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 还能提示什么呢&#xff1f;公平的玩吧&#xff08;密钥自己找&#xff09; Dncnoqqfliqrpgeklwmppu 注意&#xff1a;得到的 flag 请包上 flag{} 提交, flag{小写字母} 密文&#xff1a; Dncnoqqfliqrpgeklwmppu解…