当前位置: 首页 > news >正文

开发vue3 UI组件库,并且发布到NPM

目录

1.创建vue3工程

2.创建package文件 

3.编写组件,并且导出

4.编写package.json

5.npm账号注册登录并发布

6.从npm安装使用

7.注意事项


1.创建vue3工程

(1)初始化Vue项目

cnpm create vite

(2)进入文件夹安装依赖

cnpm i

(3)运行项目

npm run serve

2.创建package文件 

 在根目录创建package文件夹,按照下面的目录结构创建components文件夹用来存放组件

3.编写组件,并且导出

(1)这里我们就以button组件为例,任意编写一点代码,代码如下:

<template><div><button>我是测试按钮</button></div>
</template>
<script setup name="create-button">//上面的name="create-button"是组件名必须填写,他决定了在其他项目中引入此组件的名称
</script>
<style scoped>
button {width: 100px;height: 50px;display: flex;align-items: center;justify-content: center;border: none;border-radius: 10px;cursor: pointer;
}
</style>

组件编写完毕,可以在App.vue里引入编写的组件来测试一下,我这里就不展示了

(2)下面编写同文件夹下的index.js文件,这个文件的作用主要是用来单独导出某一个组件使用的,比如将来在一个项目里只需要引入一个button组件

import createButton from './index.vue';
createButton.install = (app) => {app.component(createButton.name, createButton)return app
}export default createButton

(3)下面再编写与components文件夹同级的index.js文件

import createButton from "./components/button/index.vue";//导入写好的组件
const components = [createButton]//所有的组件都放这个数组里
const install = (app) => {for (const item of components) {app.component(item.name, item)//批量注册组件}return app
}
export default { install }//如果有方法函数也可以在这里导出

4.编写package.json

在package文件夹下创建package.json文件并编写 create-ui是我随便写的名字

{"name": "create-ui","version": "0.0.1","description": "测试组件库","author": {"name": "you name","email": "you email"},"private": false,"publishConfig": {"access": "public","registry": "https://registry.npmjs.org/"},"dependencies": {"vue": "^3.3.4","element-plus": "^2.4.2","axios": "0.24.0"}
}
  1. name: 项目的名称,这是在 npm 上注册和发布你的包时使用的唯一标识符。

  2. version: 项目的当前版本号。遵循语义化版本规范(Semantic Versioning),格式为主版本号.次版本号.修订号。

  3. description: 对项目的简要描述,用于展示给用户或其他开发者。

  4. author: 项目的作者信息,包括姓名和电子邮件地址。

  5. private: 一个布尔值,指示该包是否被视为私有包。如果设置为 true,则不能通过 npm publish 发布它。

  6. publishConfig: 这个字段用于配置发布时的一些参数,比如 access 用于指定包的访问级别,registry 用于指定包发布到的注册表地址。

  7. dependencies: 项目的依赖项列表。这里列出了项目所依赖的各种 npm 包以及它们的版本范围。

每个字段在 package.json 文件中都扮演着重要的角色,它们用于描述项目的基本信息、依赖关系以及发布配置等。这些信息对于 Node.js 项目的管理和发布至关重要。

除了上述列出的字段,package.json 文件还包含其他常用字段,例如:

  1. "repository":指定了项目的代码存储位置,可以是一个 URL 或者一个包含 typeurl 属性的对象。

  2. "keywords":描述了包的关键词,有助于其他开发者在 npm 上搜索到这个包。

  3. "license":指定了项目所采用的许可证类型。

  4. "scripts":包含了一系列可执行脚本的键值对。例如,可以定义 starttest 等脚本命令,以便在命令行中运行。

  5. "devDependencies":类似于 "dependencies" 字段,用于列出开发过程中需要用到的依赖包。

  6. "main":指定了包的入口文件,即当用户 require 包时的入口文件。

  7. "engines":指定了项目的运行环境要求,比如 Node.js 的版本范围等。

  8. "peerDependencies":声明了该包所需的对等依赖关系。这些依赖关系是指包与当前包一起使用的其他包。

  9. "browserslist":用于指定项目的目标浏览器和 Node.js 版本,以便在构建过程中进行相应的兼容性处理。

这些字段可以根据项目的需要进行添加和配置,以便更好地描述和管理项目的相关信息和依赖关系。

5.npm账号注册登录并发布

(1)注册账号

想要发布到npm仓库,就必须要有一个账号,先去npm官网npm | Home (npmjs.com)注册一个账号,注意记住用户名、密码和邮箱,发布的时候可能会用到。

(2)添加npm用户

添加npm用户,执行命令:

npm adduser

这里会让你填写用户名等等,如果之前设置过即可跳过此步。

(3)发布npm

在package目录下执行命令:

npm publish

如果发布失败可能是名字重复了,改了名字即可,发布成功后,我们即可到npm管网上查看自己发布得npm包:

6.从npm安装使用

直接执行安装命令:

cnpm install create-ui //我随便写的名字

然后在main.js引用注册,代码如下:

//注册全部组建
import createUi from "create-ui";
import "create-ui/index.css";//如果有css文件也可以引入
app.use(createdUi);//单独注册某一个组件
import createButton from "create-ui/components/button";
app.use(createButton);

直接使用组件create-button,代码如下:

<template><create-button></create-button>
</template>
<script setup></script>

7.注意事项

(1)每次发布都需要更改 package.json里面的版本号version

(2)避免用到过多的依赖,有些依赖会导致整个npm包无法使用

(3)组件的name一定要取一些不常见不会和其他组件重名的

(4)极少情况发布上去的版本会有延迟,要等30分钟左右才能下载 

相关文章:

开发vue3 UI组件库,并且发布到NPM

目录 1.创建vue3工程 2.创建package文件 3.编写组件&#xff0c;并且导出 4.编写package.json 5.npm账号注册登录并发布 6.从npm安装使用 7.注意事项 1.创建vue3工程 &#xff08;1&#xff09;初始化Vue项目 cnpm create vite &#xff08;2&#xff09;进入文件夹…...

雷达测角原理、测角精度、测角分辨率以及3DFFT角度估计算法汇总

1.角度测量方法 依据&#xff1a;电磁波的直线传播和雷达天线的方向性。 分类&#xff1a;振幅法测角、相位法测角 1.1 相位法测角 相位法测角利用多个天线所接收回波信号之间的相位差进行测角。如下图所示&#xff1b; 图 1 设在θ方向有一远区目标&#xff0c;则到达接收点…...

金财数科无代码开发平台:轻松实现电商、CRM、广告推广系统的集成连接

连接与集成&#xff1a;挖掘电商平台的潜力 金财数科是一家领先的信息技术公司&#xff0c;专注于利用前沿技术如互联网、人工智能、大数据和区块链等&#xff0c;为传统财税信息化方案和产品提供升级改造&#xff0c;并打造新一代智能财税SaaS平台。我们的目标是帮助企业通过…...

JavaWeb篇_09——Tomcat运行过程以及Servlet继承结构

Tomcat运行过程 用户访问localhost:8888/test/helloword.do&#xff0c;请求被发送到Tomcat&#xff0c;被监听8888端口并处理 HTTP/1.1 协议的Connector获得。Connector把该请求交给它所在的Service的Engine来处理&#xff0c;并等待Engine的回应。Engine获得请求localhost/t…...

Python中的异常与错误处理

一、基础知识 1、一个try语句支持多个except子句&#xff0c;但请记得将更精确的异常类型放在前面。 2、try语句的else分支会在没有异常时执行&#xff0c;因此它可以用来替代标记变量&#xff08;flag变量&#xff09;。 3、不带任何参数的raise语句会直接重复抛出当前异常。…...

sqli-labs关卡16(基于post提交的双引号加括号闭合的布尔盲注)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第十六关通关思路1、判断注入点2、猜数据库长度3、猜数据库名字4、猜表名长度5、猜表名名字6、猜列名长度7、猜列名名字8、猜数据长度9、猜数据名字 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击…...

2.5k的ChatGPT-Java版SDK升级1.1.2-beta0支持GPT-4V、Dall-e-3模型、ToolCalls、微调Job、TTS...

1、项目简介 Chatgpt-Java是OpenAI官方Api的Java SDK&#xff0c;可以快速接入项目使用。支持OpenAI官方全部接口。 目前收获将2500star&#x1f31f;。 开源地址&#xff1a;https://github.com/Grt1228/chatgpt-java官方文档&#xff1a;https://chatgpt-java.unfbx.com/最…...

k8s二进制(ETCD的部署安装)

角色ip组件k8s-master192.168.11.169kube-apiserver,kube-controller-manager,kube-scheduler,etcdk8s-node1192.168.11.164kubelet,kube-proxy,docker,etcdk8s-node2192.168.11.166kubelet,kube-proxy,docker,etcd 1、为etcd签发证书 1、证书的下载(任意机器上执行都可以) …...

【rl-agents代码学习】02——DQN算法

文章目录 Highway-env Intersectionrl-agents之DQN*Implemented variants*:*References*:Query agent for actions sequence探索策略神经网络实现小结1 Record the experienceReplaybuffercompute_bellman_residualstep_optimizerupdate_target_network小结2 exploration_polic…...

关于使用 Java 反射技术来实现解耦?

关于使用 Java 反射技术来实现解耦&#xff1f; 文章目录 关于使用 Java 反射技术来实现解耦&#xff1f;一、基本说明二、代码示例三、注意 一、基本说明 Java 反射技术允许程序在运行时加载、探索和使用类和对象。通过反射&#xff0c;我们可以在程序运行期间动态地创建对象…...

使用清华智谱ChatGLM2大模型搭建本地私有知识库

首先放上该方案项目的git地址&#xff1a;https://github.com/chatchat-space/Langchain-Chatchat 以下是我的搭建和踩坑经验记录 一、环境准备 1、python安装 在环境中安装python&#xff0c;我安装的是3.9版本的python&#xff0c;官方要求的是Python 3.8 - 3.10 版本。不知…...

MES系统如何赋能制造企业实现4M防错追溯?

生产过程4M管理和MES系统的结合是现代制造业中关键的质量管理实践&#xff0c;它有助于提高生产效率、降低生产成本并保证产品质量。本文将深入探讨4M管理的概念&#xff0c;以及MES系统如何赋能制造企业实现4M防错追溯。 一、4M管理的概念 4M管理是指在制造过程中管理和控制四…...

Mybatis保存时参数携带了逗号和空格导致SQL保存异常

起初发现这个问题是因为导入文件时&#xff0c;用户输入的导入参数不规范&#xff0c;在字段中有逗号和空格一起出现&#xff0c;就会导致mybatis保存时发生sql异常。 异常数据张这样&#xff1a; INSERT INTO enterprise_stratification (id,create_date,create_by,update_da…...

vscode launch.json

有时新的服务器进行调试时&#xff0c;需要设置调试的launch.json的结果 然后就可以打开一个launch.json 其内容如下 {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.microsoft.com/fwlink/?linkid83…...

绿盟远程安全评估系统 RSAS 使用体验-难用

最近领导让我用公司采购的RSAS对产品进行漏洞扫描&#xff0c;学习并使用了这个软件&#xff0c;体验就是真的很难用。使用遇到问题时&#xff0c;咨询售后服务&#xff0c;机器人需要有公司认证&#xff0c;不能随便问问题&#xff0c;也是无语了。咨询客服&#xff0c;客服回…...

【Linux】 mdir命令使用

mdir 为mtools工具指令&#xff0c;模拟MS-DOS的dir指令&#xff0c;可显示MS-DOS文件系统中的目录内容。 语法 mdir [参数][目录] mdir命令 -Linux手册页 命令选项及作用 执行令 mdir--help 执行命令结果 参数 -a  显示隐藏文件。-f  不显示磁盘所剩余的可用空间。-w…...

解压游戏资源,导出游戏模型

游戏中有很多好看的角色&#xff0c;地图等等资源。 你有没有想过&#xff0c;把他们导出到自己的游戏中进行魔改又或则玩换肤等操作呢&#xff1f; 相信很多同学都喜欢拳皇中的角色&#xff0c; 那么我们今天就拿拳皇15举例子&#xff0c;导出他的资源。 首先要先安装好这个…...

【科研新手指南2】「NLP+网安」相关顶级会议期刊 投稿注意事项+会议等级+DDL+提交格式

「NLP网安」相关顶级会议&期刊投稿注意事项 写在最前面一、会议ACL (The Annual Meeting of the Association for Computational Linguistics)IH&MMSec (The ACM Workshop on Information Hiding, Multimedia and Security)CCS (The ACM Conference on Computer and Co…...

220kV环形网络的动态无功补偿方案初步设计

摘 要 动态无功补偿系统应用广泛&#xff0c;比如电子设备、发电系统、输电线路等方面&#xff0c;都会运用到动态无功补偿系统或工具。更高效率和更高稳定性的动态无功补偿系统一直是研究的热点。在电力系统中&#xff0c;动态无功补偿系统随处可见&#xff0c;因为运行稳…...

关于值传递和引用传递的问题记录

目录 1. 问题概述 1.1 测试 1.2 结果 2. ArrayList和Arrays.ArrayList 1. 问题概述 最近忙着写论文很久没更新了&#xff0c;趁现在有时间简单记录一下最近遇到的一个坑。 对于Java中的List<>类型的对象&#xff0c;按我以前理解是引用传递&#xff0c;但有一点要注…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...