开发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分钟左右才能下载 

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

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

相关文章

Flutter 实现 Android CollapsingToolbarLayout折叠布局效果

Flutter 是通过Tabbar TabbarView 来实现 类似Android Viewpager 页面切换的效果的。我个人觉得Flutter 的tab 切换实现过程要比Android的实现过程要简单容易不是一星半点&#xff0c;哈哈哈哈 &#xff0c;因为她所用到的widget 都是google 官方封装好的&#xff0c;用起来代…

设计模式之原型模式(Prototype)

原型模式 如果已经有一个对象了&#xff0c;你想创建一个对象&#xff0c;而且对象里面的属性和已经存在的对象的属性差不多&#xff0c;就可以使用clone方法 克隆一个出来 实现原型模式需要实现标记型接口Cloneable -->标记型接口 : 里面没有需要实现的方法(空接口) 一般…

数据运营基础:用户场景营销

一、概述 场景营销模型是顶层模型&#xff0c;是站在用户经营和用户场景角度来制定经营策略的模型。本质上&#xff0c;场景营销模型是在用户使用产品的每个细分场景中通过分析用户需求整合功能、实体和体验等为用户提供服务的模型。 二、场景的起源和特点 数据运营体系在发展…

RHCE第四次作业

题目 架设一台NFS服务器&#xff0c;并按照以下要求配置 1、开放/nfs/shared目录&#xff0c;供所有用户查询资料 2、开放/nfs/upload目录&#xff0c;为192.168.100.0/24网段主机可以上传目录&#xff0c; 并将所有用户及所属的组映射为nfs-upload,其UID和GID均为210 3、将…

ChatGPT重磅升级 奢侈品VERTU推出双模型AI手机

2023年11月7日,OpenAI举办了首届开发者大会,CEO Sam Altman(山姆奥尔特曼)展示了号称“史上最强”AI的GPT-4 Turbo。它支持长达约10万汉字的输入,具备前所未有的长文本处理能力,使更复杂的互动成为可能。此外,GPT-4 Turbo还引入了跨模态API支持,可以同时处理图片、视频和声音,从…

MySQL基础知识题目

1. 下面不属于数据库系统特点的是&#xff08; &#xff09; A.数据冗余度高 B.数据具有完整性 C.数据共享性好 D.数据独立性高 正确答案&#xff1a;A 题解&#xff1a;数据库系统的特点包括数据独立性高、数据共享性好、数据冗余度低和数据具有完整性。 2. 不属于关系数…

Three.js——基于原生WebGL封装运行的三维引擎

文章目录 前言一、什么是WebGL&#xff1f;二、Three.js 特性 前言 Three.js中文官网 Three.js是基于原生WebGL封装运行的三维引擎&#xff0c;在所有WebGL引擎中&#xff0c;Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎&#xff0c;那么…

421. 数组中两个数的最大异或值/字典树【leetcode】

421. 数组中两个数的最大异或值 给你一个整数数组 nums &#xff0c;返回 nums[i] XOR nums[j] 的最大运算结果&#xff0c;其中 0 ≤ i ≤ j < n 。 示例 1&#xff1a; 输入&#xff1a;nums [3,10,5,25,2,8] 输出&#xff1a;28 解释&#xff1a;最大运算结果是 5 XOR…

基于YOLOv8的输电线路异物识别算法应用

基于 YOLOv8 的输电线路异物识别算法应用 输电线路作为电力系统的重要一环&#xff0c;保证其安全稳定运行是十分必要的。由于长期暴露于室外&#xff0c;线路所面临的不安全因素繁多&#xff0c;异物入侵便是其中之一。异物可能会引起线路短路甚至诱发火灾&#xff0c;因此要加…

react及相关面试问题汇总

目录 1、什么是React&#xff1f;它的特点是什么&#xff1f; 2、解释一下虚拟DOM(Virtual DOM)的概念以及它的工作原理。 3、什么是组件(Component)&#xff1f;如何定义一个React组件&#xff1f; 4、什么是JSX&#xff1f;它与HTML的区别是什么&#xff1f;如何在React中…

Unity中雾效的实现方法二

文章目录 前言一、声明雾效所需要的内置变体二、在 v2f 中声明顶点传入片段中的雾效插值器三、 在顶点着色器中计算雾效采样四、在片元着色器中进行雾效颜色混合在这里插入图片描述 五、最终效果 前言 Unity中雾效的实现方法二&#xff0c;使用 Unity 自带的方法实现&#xff…

如何将系统盘MBR转GPT?无损教程分享!

什么是MBR和GPT&#xff1f; MBR和GPT是磁盘的两种分区形式&#xff1a;MBR&#xff08;主引导记录&#xff09;和GPT&#xff08;GUID分区表&#xff09;。 新硬盘不能直接用来保存数据。使用前应将其初始化为MBR或GPT分区形式。但是&#xff0c;如果您在MBR时需…

torch.norm求范数

pytorch在数学计算上下足了功夫&#xff0c;在支持海量数学公式的同时还将速度优化到超过大部分用户DIY的水平。所以&#xff0c;pytorch中的每个常见的数学计算函数都需要我们有一定了解。 今天介绍的是torch.norm&#xff0c;一个pytorch用来求范数的函数。我们先看求范数的数…

基于FPGA的EMAC模块与FIFO模块:高速数据传输与存储

基于FPGA的EMAC模块与FIFO模块&#xff1a;高速数据传输与存储 在现代社会&#xff0c;高速数据传输和存储是信息技术领域的关键问题之一。而基于FPGA的EMAC模块与FIFO模块则成为了解决这些问题的重要途径。本文将介绍这两个模块的原理、实现方法以及如何在FPGA中应用它们。 …

关于我在配置zookeeper出现,启动成功,进程存在,但是查看状态却没有出现Mode:xxxxx的问题和我的解决方案

在我输入:zkServer.sh status 之后出现报错码. 报错码&#xff1a; ZooKeeper JMX enabled by default Using config: /opt/software/zookeeper/bin/../conf/zoo.cfgClient port found: 2181. Client address: localhost. Error contacting service. It is probably not runni…

基于SpringBoot的SSMP整合案例(开启日志与分页查询条件查询功能实现)

开启事务 导入Mybatis-Plus框架后&#xff0c;我们可以使用Mybatis-Plus自带的事务&#xff0c;只需要在配置文件中配置即可 使用配置方式开启日志&#xff0c;设置日志输出方式为标准输出mybatis-plus:global-config:db-config:table-prefix: tb_id-type: autoconfiguration:…

【自动化测试】Pytest框架 —— 跳过测试和失败重试

1、Pytest跳过测试用例 自动化测试执行过程中&#xff0c;我们常常出现这种情况&#xff1a;因为功能阻塞&#xff0c;未实现或者环境有问题等等原因&#xff0c;一些用例执行不了&#xff0c; 如果我们注释掉或删除掉这些测试用例&#xff0c;后面可能还要进行恢复操作&#…

ObRegisterCallbacks()返回0xC0000022(拒绝访问)解决办法

在开发测试环境下&#xff0c;没有打签名的驱动调用ObRegisterCallbacks会返回0xC0000022&#xff08;拒绝访问&#xff09;的错误码。这是由于该函数内部会进行驱动的签名校验。 具体位置在 因此可以用以下代码绕过该检查 // 以下代码放在DriverEntry中 ULONG_PTR pDrvSectio…

【手动创建UIWindow Objective-C语言】

一、上节课,我们讲了控制器View的懒加载: 1.什么时候会调用这个懒加载呢,用我们直接,控制器self.view self.view的时候: 什么时候,调用它这个self.view, 就要去加载控制器的view, self.view 加载控制器的view 我们给大家演示过了,这个大家已经清楚了,我们给大家说…

vb.net圣经带快捷键,用原装的数据库

Imports System.Data.SqlServerCe Imports System.Text.RegularExpressions Imports System.Data.OleDbPublic Class Form1Dim jiuyue As String() {"创", "出", "利", "民", "申", "书", "士", "…