npm发布vue3自定义组件库--方法一

news2025/1/10 20:24:11

npm发布vue3自定义组件库

创建项目

vue create test-ui

自定义组件

创建自定义组件,组件名称根据你的需求来,最好一个组件一个文件夹,下图是我的示例。
src/components
在这里插入图片描述
组件和你写页面一样,所谓组件就是方便实用,不用重复搬动页面到不同的项目,可以直接install到你本地的项目,下图是一个示例。
在这里插入图片描述
编写完组件后,你可以在App.vue里测试一下是否可以正常使用
在这里插入图片描述
在这里插入图片描述

准备发布

组件封装

在components目录下新建index.js文件,把你想发布的组件写在里面
在这里插入图片描述

组件打包配置

修改package.json文件,配置打包命令
–target lib 关键字 指定打包的目录
–name 打包后的文件名字
–dest 打包后的文件夹的名称
在这里插入图片描述

开始打包

执行打包命令

npm run package

打包完之后项目目录下就会多出一个cjulyUI文件夹,存放的是打包后的文件
在这里插入图片描述

初始化打的包的package.json

进入打的包目录下然后执行初始化命令,执行完之后会在包下生成一个package.json文件。

cd .\cjulyUI\
npm init -y

在这里插入图片描述

定义要发布的组件库的名称

在打的包下修改刚生成的package.json文件中的name值,此值就是要发布的组件库的名称,切记组件库的名称在npm是没有人发布过的,否则无法发布。
在这里插入图片描述
https://www.npmjs.com/
在这里插入图片描述

注册npm账户

https://www.npmjs.com/signup
在这里插入图片描述
注册完之后在本地登录

# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录,然后输入你的账号,密码,邮箱及验证码
npm login

发布及使用

发布

在已打包的目录下执行发布命令

npm publish

使用

在你想使用此组件库的项目中安装并引入即可使用

安装组件库

npm install cjuly-ui

main.js中全局引入

# vue2引入
import cjuly-ui from 'cjuly-ui'
Vue.use(cjuly-ui);

# vue3引入
import cjuly-ui from 'cjuly-ui'
createApp(App).use(cjuly-ui).mount('#app')

像element一样直接使用即可
在这里插入图片描述

更新组件库

在组件库项目中的打包的目录下,执行以下命令:

npm version patch
npm publish

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

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

相关文章

Unity Bolt 实现UI拖拽功能

最近在学习使用Bolt插件实现五代码对UGUI Image元素实现拖拽。先看效果 录制_2023_09_15_17_50_45_29 下面是实现方式介绍: 1:注册RectTransformUtility 在使用Bolt插件实现UI拖拽的功能,需要使用 RectTransformUtility.ScreenPointToLoca…

网络安全深入学习第五课——热门框架漏洞(RCE— Apache Shiro 1.2.4反序列化漏洞)

文章目录 一、序列化和反序列化二、反序列化漏洞原理三、Apache Shiro 1.2.4反序列化漏洞1、漏洞描述:2、漏洞影响的版本3、Shiro反序列化漏洞原理4、工作原理:5、shiro反序列化的特征: 四、Apache Shiro 1.2.4反序列化漏洞手工复现1、使用DN…

做好制造项目管理的5个技巧

制造过程通常由不同的要素组成,如采购材料、与供应商合作、优化生产线效率等。制造商还需要处理库存、物流和分销。 为了确保制造项目在预算范围内按时完成,并且不遗漏任何环节,企业必须建立项目管理流程,以帮助改善组织流程和效…

社区版MyApps低代码平台,免费即刻拥有!

编者按:本文主要介绍了MyApps推出的免费社区版的优势,为企业数字化转型提供了解决方案。立即登录MyApps低代码平台,就能获取永久免费的低代码平台。 1.MyApps社区版的优势 1.1不受限制,畅享自由 无用户限制、无安装限制、全面应用…

使用 Charles 去修改响应信息(真实工作使用场景1)

目录 背景 理论 Breakpoint功能 Map功能 实践 原理 背景 测试过程中,遇到接口透传数据,修改请求中的值可以使用Postman来进行,当业务场景遇到修改响应里的值的时候,就需要借助Charles来进行。 以下将会阐述具体的步…

七天学会C语言-第三天(循环语句)

1. 用 while 语句循环做数学运算&#xff1a; 使用while语句&#xff0c;您可以创建一个循环&#xff0c;它会重复执行一段代码&#xff0c;直到指定的条件不再满足。 例 1&#xff1a; 求 246100。 #include <stdio.h>int main() {int n 1, sum 0, a 2;while (n &…

第六章 关系数据库理论

第六章 关系数据库理论 6.1 问题的提出 关系模式的表示 关系模式由五部分组成&#xff0c;是一个五元组&#xff1a;R&#xff08;U&#xff0c;D&#xff0c;DOM&#xff0c;F&#xff09;。&#xff08;1 关系名R是符号化的元组语义。U为一组属性。D为属性组U中的属性所来自…

K8s的网络——Underlay和Overlay网络

0. 基础知识 1&#xff09;网络7层基础知识 在网络7层协议基础里&#xff0c; 第一层物理链路&#xff1b;第二层是数据链路层&#xff0c;在第一层的基础上引入MAC地址做数据转发。MAC地址在局域网内具有唯一性&#xff0c;主机A发送数据时&#xff0c;会向局域网内进行广播…

idea显示git分支信息(GitToolBox插件)

效果图 说明 本身idea在右下角会有git分支信息&#xff0c;但是显示的当前打开文件的分支信息&#xff0c;并且不够显眼 解决 1、安装插件(GitToolBox插件) 2、修改idea.properties project.tree.structure.show.urlfalse ide.tree.horizontal.default.autoscrollingfalse将…

【数据结构】堆的应用+TOP-K问题+二叉树遍历

欢迎来到我的&#xff1a;世界 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言堆的时间复杂度向下调整算法的时间复杂度向上调整算法的时间复杂度 堆的应用堆排序TOP—K问题链式二叉树二叉树的节点&#xff1a;初始化节…

ThreadLocal线程局部变量

1.原理 ThreadLocal是用来保存当前线程数据的&#xff0c;每一个线程的内部都有一个ThreadLocalMap&#xff0c;当前这个map中存储了以当前ThreadLocal作键&#xff0c;具体的数据作值的一个个Entry对象。 为什么非得以ThreadLocal对象作键呢&#xff1f;因为一个线程可能使用了…

手游联运平台是什么?

手游联运平台是一种服务于手游联运的专业平台&#xff0c;旨在为游戏开发商、发行商和代理商提供联运合作所需的技术、工具和资源。这些平台通常提供以下功能和服务&#xff1a; 游戏接入和管理&#xff1a;允许游戏开发商将他们的游戏接入联运平台&#xff0c;以便发行到不同的…

linux 环境变量详解/etc/proflie

Linux 环境变量是可以在多个文件中进行配置的&#xff0c;如/etc/proflie&#xff0c;/etc/profile.d/*.sh&#xff0c;~/.bashrc&#xff0c;~/.bash_profile等但是这些之间有什么区别呢 bash的运行模式可以分为 login shell 和 non-login shell。 例如&#xff1a;通过终端&a…

【送书活动】强势挑战Java,Kotlin杀回TIOBE榜单Top 20!学Kotlin看哪些书?

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…

王道考研操作系统

王道考研操作系统 计算机系统概述操作系统的概念操作系统的特征操作系统的发展历程操作系统内核中断和异常![在这里插入图片描述](https://img-blog.csdnimg.cn/162452b4c60144e0bd500e180127c447.png)系统调用操作系统结构虚拟机错题 进程与线程进程控制进程通信线程和多线程模…

Python+Selenium定位不到元素常见原因及解决办法(报:NoSuchElementException)

这篇文章主要介绍了PythonSelenium定位不到元素常见原因及解决办法(报&#xff1a;NoSuchElementException),文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 在做web应用的自动…

elasticsearch17-自动补全

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

2023/9/17总结

Vue defineOptions 为什么要使用defineOptions 在有<script setup> 之前 如果需要定义props emit 可以很容易的添加一个与setup 平级的属性 但是用了 <script setup> 后 就不能这样做了 setup 属性也就没有了&#xff0c;就不能添加 与其平级 的属性 为了解…

基于springboot+vue的网上商城系统

一、选题背景意义 &#x1f30a;项目背景&#xff1a;该电子商城系统旨在为商家和消费者提供一个直观、易用的购物平台&#xff0c;通过该平台销售商品和宣传品牌&#xff0c;消费者通过该平台购买商品&#xff0c;享受更便捷的购物体验。在该电子商城系统中&#xff0c;商家可…

腾讯Behaviac Designer 和Unity连调行为树

1. 克隆源码 https://github.com/Tencent/behaviac/ 2. 编译生成BehaviacDesigner.exe 3. 找到并打开BehaviacDesigner.exe&#xff08;先不急着填弹出的路径workspace 设置框&#xff09; 4. 新建一个Unity 空工程&#xff0c;并在此处下载behaviac unitypackage 5. Unity中…