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

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

Pandas 可视化集成:数据科学家的高效绘图指南

为什么选择 Pandas 进行数据可视化&#xff1f; 在数据科学和分析领域&#xff0c;可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具&#xff0c;如 Matplotlib、Seaborn、Plotly 等&#xff0c;但 Pandas 内置的可视化功能因其与数据结…...

MeanFlow:何凯明新作,单步去噪图像生成新SOTA

1.简介 这篇文章介绍了一种名为MeanFlow的新型生成模型框架&#xff0c;旨在通过单步生成过程高效地将先验分布转换为数据分布。文章的核心创新在于引入了平均速度的概念&#xff0c;这一概念的引入使得模型能够通过单次函数评估完成从先验分布到数据分布的转换&#xff0c;显…...

JavaScript性能优化实战大纲

性能优化的核心目标 降低页面加载时间&#xff0c;减少内存占用&#xff0c;提高代码执行效率&#xff0c;确保流畅的用户体验。 代码层面的优化 减少全局变量使用&#xff0c;避免内存泄漏 // 不好的实践 var globalVar I am global;// 好的实践 (function() {var localV…...

React 样式方案与状态方案初探

React 本身只提供了基础 UI 层开发范式&#xff0c;其他特性的支持需要借助相关社区方案实现。本文将介绍 React 应用体系中样式方案与状态方案的主流选择&#xff0c;帮助开发者根据项目需求做出合适的选择。 1. React 样式方案 1.1. 内联样式 (Inline Styles) 通过 style …...