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

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.rhkb.cn/news/138625.html

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

相关文章

2023上半年薪资报告出炉!人均月入过万?!

最近,大家都有听到经济回暖的消息吧?经过三年口罩大考之后,2023年上半年各行各业都迎来复苏,关于职场的话题讨论也不绝于耳。 现在就业环境如何?哪些行业更有前途?大家在求职时是选择一线城市还是回二、三…

四川玖璨电子商务有限公司专注抖音电商运营

四川玖璨电商是一个靠谱的抖音培训公司,在电商行业内有着广泛的知名度和良好的口碑。该公司通过多年的发展,形成了独特的运营理念和有效的运营策略,为商家提供了一站式的抖音电商运营服务。 首先,四川玖璨电子商务有限公司注重与…

【c语言】贪吃蛇

当我们不想学习新知识的时候,并且特别无聊,就会突然先看看别人怎么写游戏的,今天给大家分享的是贪吃蛇,所需要的知识有结构体,枚举,以及easy-x图形库的一些基本函数就完全够用了,本来我想插入游…

「聊设计模式」之 设计模式的前世今生

🏆本文收录于《聊设计模式》专栏,专门攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎持续关注&&收藏&&订阅! 大家下午好,我是bug菌,今天我们继续聊设…

服务网格和性能优化:介绍如何通过服务网格提高微服务架构的性能和可扩展性

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

RS485以及MODBUS学习

学习目的: 1、什么是485? 2、485如何通信? 3、如何使用熟能生巧? RS485是一种四总线通信,分别是VCC、GND、485_A、485_B。两根负责通信,两根负责进行供电。 RS485通信 硬件层:解决的是数据传输问…

为什么伦敦金获得连续盈利这么难

相信在伦敦金市场中投资的投资者都有这个感受,我们很容易在市场中获取力量利润,但是要长期的在市场中稳定的盈利,持续不断地获利,这对很多投资者来说都有点难,可以这么说,稳定盈利是普通投资者一个阶段性的…

Spring Boot 各版本的支持时间

1. Spring Boot 各版本的支持时间 Spring Boot 2.7 的版本,支持到2023-11-18,之后就要停止支持了。 按照官网的数据,3.0 的版本也是到2023年11月就停止支持了。如果要转到SpringBoot3,直接从3.1开始吧。到写这篇文章时&#xff…

霍夫曼编码,计算霍夫曼编码树(数字图像处理大题复习 P7)

文章目录 计算出 x1~x6 的树计算 x1~x6 的编码得出霍夫曼编码 w1~w6 计算出 x1~x6 的树 我们先对 x1~x6 进行排序把最底下的加起来,上面写0 下面写1 然后一层一层加上去,注意加上去以后要 重新排序 计算 x1~x6 的编码 举例,从 x5 出发&…

性能测试监控指标及分析调优 | 京东云技术团队一、哪些因素会成为系统的瓶颈?

1. 什么是MAF和MEF? MEF和MEF微软官方介绍:Managed Extensibility Framework (MEF) - .NET Framework | Microsoft Learn MEF是轻量化的插件框架,MAF是复杂的插件框架。 因为MAF有进程隔离和程序域隔离可选。我需要插件进程隔离同时快速传递数据&…

基于Spring Boot的网上购物商城系统

目录 前言 一、技术栈 二、系统功能介绍 用户功能模块的实现 管理员功能模块的实现 商家功能模块的实现 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 本课题是根据用户的需要以及网络的优势建立的一个基于Spring Boot的网上购物商城系统,…

ubuntu、linux in window安装docker教程

1、首先进入管理员权限。 2、更新软件源。 sudo apt update 3、安装一些依赖 sudo apt install apt-transport-https ca-certificates curl software-properties-common 4、为系统添加Docker的密钥 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-k…

【RabbitMQ实战】docker 安装RabbitMQ(bitnami)

一、搜索镜像 [rootlocalhost ~]# docker search rabbitmq NAME DESCRIPTION STARS OFFICIAL AUTOMATED rabbitmq RabbitMQ is an open source multi-pro…

【论文笔记】Scene as Occupancy

原文链接:https://arxiv.org/abs/2306.02851 1. 引言 与传统的3D框物体表达相比,使用3D占用表达是几何感知的,因为3D框表达简化了物体的形状。此外,现有基于视觉的方法很少考虑时间信息;单阶段方法缺少从粗到细的细化…

建议收藏《Verilog代码规范笔记_华为》(附下载)

华为verilog编程规范是坊间流传出来华为内部的资料,其贴合实际工作需要,是非常宝贵的资料,希望大家善存。至于其介绍,在此不再赘述,大家可看下图详细了解,感兴趣的可私信领取《Verilog代码规范笔记_华为》。…

open62541开发:添加sqlite3 历史数据库

历史数据库在OPCUA 应用中十分重要,例如OPCUA 网关和OPCUA 汇聚服务器中都需要历史数据库功能。但是open62541 协议栈中仅包含了基于内存的历史数据库,在实际应用中是不够的。本博文讨论open62541 中添加sqlite3 为基础的历史数据库若干问题。 借鉴 Gi…

Postman应用——接口请求和响应(Get和Post请求)

文章目录 新增Request请求Get请求Post请求 Request请求响应Postman响应界面说明请求响应另存为示例(模板)Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式,也可以遵循restful api接口规范&#…

【Spring Boot】拦截器学习笔记

一、普通拦截器 1,新建类MyWebConfig实现WebMvcConfigurer,实现addInterceptors方法 Overridepublic void addInterceptors(InterceptorRegistry registry) {registry// 不拦截哪些请求.excludePathPatterns("/login")// 拦截哪些请求.addPat…

D1117内置热保护和电流限制保护功能,输出电流能力为 1.0A,应用于计算机主板和显卡电源管理等产品上

D1117 是一款低压差线性稳压电路,该电路输出电流能力为 1.0A。该系列电路包含固定输出电压版本和可调输出电压版本, 其输出电压精度为1.5% 。为了保证芯片和电源系统的稳定性,D1117 内置热保护和电流限制保护功能,同时产品采用了…

【前端知识】Three 学习日志(七)—— 动画渲染循环

Three 学习日志(七)—— 动画渲染循环 一、旋转动画 // 渲染函数 function render() {renderer.render(scene, camera); //执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render);//请求再次执行渲染函数render&#…