当前位置: 首页 > 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;但有一点要注…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…...