Vue3 + Vite 构建组件库发布到 npm
你有构建完组件库后,因为不知道如何发布到 npm 的烦恼吗?本教程手把手教你用 Vite 构建组件库发布到 npm
搭建项目
- 这里我们使用 Vite 初始化项目,执行命令:
pnpm create vite my-vue-app --template vue
- 这里以我的项目 vue3-xmw-table 为例
调整目录结构
- 首先需要创建一个
packages
目录,用来存放组件 - 将
src
目录改为examples
用作示例 - 启动项目的时候,默认入口文件是
src/main.js
,将src
目录改为examples
之后,就需要重新配置入口文件,在根目录下创建一个vue.config.js
文件
// vue.config.jsmodule.exports = {// 将 examples 目录添加为新的页面pages: {index: {// page 的入口entry: 'examples/main.ts',// 模板来源template: 'public/index.html',// 输出文件名filename: 'index.html'}}}
- 修改根目录入口文件
index.html
中的main.ts
引入路劲
<script type="module" src="/examples/main.ts"></script>
- 完整的目录结构如下:
组件开发
-
之前我们创建的
packages
目录,用来存放组件 -
该目录下存放每个组件单独的开发目录,和一个
index.js
整合所有组件,并对外导出 -
每个组件都应该归类于单独的目录下,包含其组件源码目录
src
,和index.js
便于外部引用 -
这里以组件
xmwTable
为例,完整的packages
目录结构如下:
-
xmwTable/src/main.vue
就是组件的入口文件,这里有一点要非常注意:
需要注意的是,组件必须声明
name
,这个name
就是组件的标签
<script lang="ts">export default {name: "vue3-xmw-table", //这个⾮常重要,就是未来你放到其他项⽬中,组件标签的名字,⽐如:<vue3-xmw-table></vue3-xmw-table>};
</script>
整合并导出组件
- 编辑
packages/xmwTable/index.ts
,实现组件的导出
// 导入组件,组件必须声明 name
import XmwTable from './src/main.vue'// 为组件添加 install 方法,用于按需引入
XmwTable.install = function (Vue: any) {Vue.component(XmwTable.name, XmwTable)
}export default XmwTable
- 编辑
packages/index.ts
文件,实现组件的全局注册
// packages / index.js// 导入单个组件
import XmwTable from './xmwTable/index'// 以数组的结构保存组件,便于遍历
const components = [XmwTable
]// 定义 install 方法
const install = function (Vue: any) {if (install.installed) returninstall.installed = true// 遍历并注册全局组件components.map(component => {Vue.component(component.name, component)})
}if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}export default {// 导出的对象必须具备一个 install 方法install,// 组件列表...components
}
编写 package.json 文件
package.json
文件里面有很多字段要填写,否则不能正确发布。最重要的是以下几个:name
: 包名,该名字是唯一的。可在npm
官网搜索名字,如果存在则需换个名字。version
: 版本号,不能和历史版本号相同。files
: 配置需要发布的文件。main
: 入口文件,默认为index.js
,这里改为dist/vue3-xmw-table.umd.js
。module
: 模块入口,这里改为dist/vue3-xmw-table.es.js
。
- 完整的
package.json
如下:
{"name": "vue3-xmw-table","version": "1.1.2","main": "dist/vue3-xmw-table.umd.js","module": "dist/vue3-xmw-table.es.js","types": "vue3-xmw-table.d.ts","files": ["dist/*","vue3-xmw-table.d.ts"],"private": false,"author": {"name": "baiwumm","email": "843348394@qq.com"},"license": "ISC","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"@types/node": "^17.0.6","element-plus": "^1.3.0-beta.1","vue": "^3.2.26","vue-router": "^4.0.12"},"devDependencies": {"@vitejs/plugin-vue": "^2.0.0","@vitejs/plugin-vue-jsx": "^1.3.10","@vue/compiler-sfc": "^3.1.4","eslint": "^8.6.0","eslint-plugin-vue": "^8.2.0","sass": "^1.45.2","sass-loader": "^12.4.0","typescript": "^4.4.4","vite": "^2.7.2","vue-tsc": "^0.29.8"}
}
vite 打包配置
- 因为组件库一般都是
jsx
语法编写,所以要加上@vitejs/plugin-vue-jsx
,打包成lib
,编辑vite.config.ts
:
// filename: vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), vueJsx({})],build: {rollupOptions: {// 请确保外部化那些你的库中不需要的依赖external: ['vue'],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: 'Vue',},},},lib: {entry: './packages/index.ts',name: 'vue3-table',},},
})
- 执行
yarn run build
会生成 dist 文件夹,里面有以下几个文件:
本地模拟
- 修改文件
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import XmwTable from '../dist/vue3-xmw-table.es.js'createApp(App).use(router).use(ElementPlus).use(XmwTable).mount('#app')
- 若
vue3-xmw-table
组件能成功显示在页面,则证明组件的打包是没问题的。
发布到 npm
- 先查看
npm
的registry
npm config get registry
- 设置
npm
的registry
为官方源
npm config set registry https://registry.npmjs.org
- 执行命令
npm login
登录到npm
npm login
- 执行命令
npm publish
发布到npm
npm publish
如出现以下信息,则证明包发布成功:
注:上传的
npm
包,在 72小时 后不可删除,如果是测试用的包,记得 72小时 内删除。
安装验证
- 执行命令
npm i vue3-xmw-table
- 在
main.ts
引入并注册
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Xmwtable from 'vue3-xmw-table'createApp(App).use(router).use(ElementPlus).use(Xmwtable).mount('#app')
- 页面中引用
<!-- 数据表格 --><vue3-xmw-tablestripebordershow-summary:summary-method="getSummaries":tableData="state.tableData":loading="state.loading":columns="state.firstLoad ? firstColumns : state.tableColumns":tableConfig="tableConfig":showPagination="false"style="margin-top: 20px":span-method="objectSpanMethod"><template v-slot:handler="{ scope }"><el-buttonsize="small"type="primary"@click="scope.$index == state.tableData.length - 1? hanglerEditSpending(scope): handlerEdit(scope)">编辑</el-button><el-buttontype="danger"size="small"@click="handlerDelect(scope)":disabled="scope.$index == state.tableData.length - 1">删除</el-button></template></vue3-xmw-table>
组件正常显示,恭喜💐你,你的包已经发布成功拉,赶紧去使用吧🎉🎉
相关文章:
Vue3 + Vite 构建组件库发布到 npm
你有构建完组件库后,因为不知道如何发布到 npm 的烦恼吗?本教程手把手教你用 Vite 构建组件库发布到 npm 搭建项目 这里我们使用 Vite 初始化项目,执行命令: pnpm create vite my-vue-app --template vue这里以我的项目 vue3-xm…...
Vite多环境配置与打包:灵活高效的Vue开发工作流
🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…...
从零实现诗词GPT大模型:数据集介绍和预处理
专栏规划: https://qibin.blog.csdn.net/article/details/137728228 本章将介绍该系列文章中使用的数据集,并且编写预处理代码,处理成咱们需要的格式。 一、数据集介绍 咱们使用的数据集名称是chinese-poetry,是一个在github上开源的中文诗…...
45.HarmonyOS鸿蒙系统 App(ArkUI)创建列表(List)
列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列…...
推荐算法之协同过滤
算法原理 透过百科,我们了解到协同过滤推荐(Collaborative Filtering recommendation)是在信息过滤和信息系统中正迅速成为一项很受欢迎的技术。与传统的基于内容过滤直接分析内容进行推荐不同,协同过滤算法结合用户行为分析用户…...
Kotlin 面试题
lifecycleScope.launchWhenResumed launchWhenResumed是一个扩展函数,它是LifecycleCoroutineScope的一部分,并且它是在Android的Lifecycle库中引入的。 这个函数的主要目的是在Lifecycle的对应组件(通常是Activity或Fragment)处于“resumed”状态时启动协程。 public fun …...
TCM(Tightly Coupled Memory)紧密耦合存储器简介
在ARM Cortex处理器中,TCM通常指的是紧密耦合存储器(Tightly Coupled Memory)。TCM是一种位于处理器核心旁边的高速存储器,它的设计目的是为了提供低延迟和高带宽的内存访问性能。 TCM的特点是它与处理器内核紧密耦合,…...
《自动机理论、语言和计算导论》阅读笔记:p172-p224
《自动机理论、语言和计算导论》学习第 8 天,p172-p224总结,总计 53 页。 一、技术总结 1.Context-Free Grammar(CFG) 2.parse tree (1)定义 p183,But perhaps more importantly, the tree, known as a “parse tree”, when used in a …...
typescript playwright 笔记
录制调式 命令 npx playwright codegen url npx playwright codegen https://www.baidu.com/typescript 中 format 和 split 的使用 import * as util from util;const str1 hellow %s; const format util.format; const str2 format(str1, word);// 提取taskId const str3…...
从零实现诗词GPT大模型:了解Transformer架构
专栏规划: https://qibin.blog.csdn.net/article/details/137728228 这篇文档我们开始对GPT的核心组件Transformer进行一个详细的讲解, 加急编写中…...
温故知新之-TCP Keepalive机制及长短连接
[学习记录] 前言 TCP连接一旦建立,只要连接双方不主动 close ,连接就会一直保持。但建立连接的双方并不是一直都存在数据交互,所以在实际使用中会存在两种情况:一种是每次使用完,主动close,即短连接&…...
架构师系列-搜索引擎ElasticSearch(七)- 集群管理之分片
集群健康检查 Elasticsearch 的集群监控信息中包含了许多的统计数据,其中最为重要的一项就是集群健康,它在 status字段中展示为 green(所有主分片和副本分片都正常)、yellow(所有数据可用,有些副本分片尚未…...
基于Spring Boot实现的图书个性化推荐系统
基于Spring Boot实现的图书个性化推荐系统 开发语言:Java语言 数据库:MySQL工具:IDEA/Ecilpse、Navicat、Maven 系统实现 前台首页功能模块 学生注册 登录 图书信息 个人信息 管理员功能模块 学生管理界面图 图书分类管理界面图 图书信息管…...
安全加速SCDN带的态势感知能为网站安全带来哪些帮助
随着安全加速SCDN被越来越多的用户使用,很多用户都不知道安全加速SCDN的态势感知是用于做什么的,德迅云安全今天就带大家来了解下什么是态势感知,态势感知顾名思义就是对未发生的事件进行预知,并提前进行防范措施的布置࿰…...
java面向对象.day21(继承02--super)
说明 super父 this当前 使用super时,首先要继承父类,其次是在子类里面才能使用super。 继承父类后,运行子类时会同时调用父类的构造方法,如果要显性调用父类的构造方法必须在子类的第一行调用。 单使用super()表示调用父类构造…...
【数据结构】4.List的介绍
目录 1.什么是List 2.常见接口介绍 3.List的使用 1.什么是List 在集合框架中,List是一个接口,继承自Collection。 Collection也是一个接口,该接口中规范了后序容器中常用的一些方法,具体如下: Iterable也是一个接口…...
acwing算法提高之图论--最近公共祖先
目录 1 介绍2 训练 1 介绍 本博客用来记录"对于有根图中,求最近公共祖先"的题目。 求解方法: 向上标记法。每次求两个结点的最近公共祖先的时间复杂度是O(N)。由于时间复杂度较高,通常不用。倍增法。 倍增法重要思路࿱…...
C语言 函数——断言与防御式编程
目录 如何确定假设的真假? 断言 防御式编程(Defensive programming) 如何确定假设的真假? 程序中的假设 *某个特定点的某个表达式的值一定为真 *某个特定点的某个表达式的值一定位于某个区间等 问题:如何确定这些…...
【opencv】示例-travelsalesman.cpp 使用模拟退火算法求解旅行商问题
// 载入 OpenCV 的核心头文件 #include <opencv2/core.hpp> // 载入 OpenCV 的图像处理头文件 #include <opencv2/imgproc.hpp> // 载入 OpenCV 的高层GUI(图形用户界面)头文件 #include <opencv2/highgui.hpp> // 载入 OpenCV 的机器学习模块头文件 #includ…...
【linux深入剖析】深入理解软硬链接 | 动静态库的制作以及使用
🍁你好,我是 RO-BERRY 📗 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 🎄感谢你的陪伴与支持 ,故事既有了开头,就要画上一个完美的句号,让我们一起加油 目录 1.理解软硬链接1.1 操作观…...
xss常用标签和触发事件
无过滤情况 <script> <scirpt>alert("xss");</script> <img> 图片加载错误时触发 <img src"x" οnerrοralert(1)> <img src"1" οnerrοreval("alert(xss)")> 鼠标指针移动到元素时触发 <im…...
WPF中Binding的原理和应用
WPF中Binding的原理和应用 在WPF中,Binding机制是实现数据与界面的连接和同步的重要工具。了解Binding的原理和应用,对于开发人员来说是非常重要的。本文将详细介绍WPF中Binding的原理和应用,帮助读者更好地理解和运用这一强大的机制。 Bin…...
探索设计模式的魅力:深度挖掘响应式模式的潜力,从而精准优化AI与机器学习项目的运行效能,引领技术革新潮流
🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》 💪🏻 制定明确可量化的目标,坚持默默的做事。 挖掘响应式模式,优化AI与机器学习项目性能,引领技术新潮流 ✨机器学习界的…...
《经典论文阅读2》基于随机游走的节点表示学习—Deepwalk算法
word2vec使用语言天生具备序列这一特性训练得到词语的向量表示。而在图结构上,则存在无法序列的难题,因为图结构它不具备序列特性,就无法得到图节点的表示。deepwalk 的作者提出:可以使用在图上随机游走的方式得到一串序列&#x…...
Java实现二叉树(下)
1.前言 http://t.csdnimg.cn/lO4S7 在前文我们已经简单的讲解了二叉树的基本概念,本文将讲解具体的实现 2.基本功能的实现 2.1获取树中节点个数 public int size(TreeNode root){if(rootnull){return 0;}int retsize(root.left)size(root.right)1;return ret;}p…...
Hello 算法10:搜索
https://www.hello-algo.com/chapter_searching/binary_search/ 二分查找法 给定一个长度为 n的数组 nums ,元素按从小到大的顺序排列,数组不包含重复元素。请查找并返回元素 target 在该数组中的索引。若数组不包含该元素,则返回 -1 。 # 首…...
常见分类算法详解
在机器学习和数据科学的广阔领域中,分类算法是至关重要的一环。它广泛应用于各种场景,如垃圾邮件检测、图像识别、情感分析等。本文将深入剖析几种常见的分类算法,帮助读者理解其原理、优缺点以及应用场景。 一、K近邻算法(K-Nea…...
推送恶意软件的恶意 PowerShell 脚本看起来是人工智能编写的
威胁行为者正在使用 PowerShell 脚本,该脚本可能是在 OpenAI 的 ChatGPT、Google 的 Gemini 或 Microsoft 的 CoPilot 等人工智能系统的帮助下创建的。 攻击者在 3 月份的一次电子邮件活动中使用了该脚本,该活动针对德国的数十个组织来传播 Rhadamanthy…...
微服务之Consul 注册中心介绍以及搭建
一、微服务概述 1.1单体架构 单体架构(monolithic structure):顾名思义,整个项目中所有功能模块都在一个工程中开发;项目部署时需要对所有模块一起编译、打包;项目的架构设计、开发模式都非常简单。 当项…...
MES生产管理系统:私有云、公有云与本地化部署的比较分析
随着信息技术的迅猛发展,云计算作为一种新兴的技术服务模式,已经深入渗透到企业的日常运营中。在众多部署方式中,私有云、公有云和本地化部署是三种最为常见的选择。它们各自具有独特的特点和适用场景,并在不同程度上影响着企业的…...
wordpress 分析/关键词排名优化公司哪家好
概述在过去的几年中,类似于 RottenPotato、RottenPotatoNG 或 Juicy Potato 这样的一些 Windows 特权模拟工具,已经在攻防安全社区中非常流行。但是,随着操作系统不断的升级,其中也有意或无意地降低了在 Windows 10 和 Windows Se…...
做外贸哪些网站可以发免费信息/百度文库个人登录
set 不允许重复 无序 hashset->hashmap LinkedHashSet—LinkedHashMap TreeSet----TreeMap实现了SortedSet接口 return map.put(e, PRESENT)null; //PRESENT始终是一个new object 将元素作为key存储,这也是为什么Set元素无序,不重复,不为n…...
营销型网站建设讨论题/网络市场营销策划书
# type()的使用方法 a "123" print(type(a))>>><class str># isinstance()的使用方法: a "123" print(isinstance(a, int)) print(isinstance(a, str))>>> False True...
更改wordpress登陆/长沙百度网站优化
/* 结构体与类之间的区别在于:结构体中所有成员(包括数据成员和成员函数)缺省情况下都是public, 而类中所有成员缺省情况下都是private。除些之外,两者可以通用。 */ #include <iostream> #include <string…...
企业网站怎么搭建/信息流广告投放流程
对于 Python 是一门优雅的语言,这一点应该不会有太多人反对,随着我们对 CPython 实现的研究,不得不说 Python 的优雅一直渗透到它的底层,在 Python 的 C 实现这一层,几乎全部以 Python C API 实现,函数之间…...
烟台网站建设推荐企汇互联见效付款/如何免费建立一个网站
第九章 接口(二)(接下来的内容是(一)的补充,本篇文章主要讲三个知识点)1. 继承内部类简单来讲就是内部类中外部类继承内部类,在外部类继承内部类的时候就必须要解决对应外部类引用初…...