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

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

news 2026/2/8 20:16:43

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

相关文章：

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

npm发布vue3自定义组件库创建项目 vue create test-ui自定义组件创建自定义组件，组件名称根据你的需求来，最好一个组件一个文件夹，下图是我的示例。 src/components 组件和你写页面一样，所谓组件就是方便实用，不…...

编程日记 2023/9/23 21:11:45

Centos7原生hadoop环境，搭建Impala集群和负载均衡配置

Centos7原生hadoop环境，搭建Impala集群和负载均衡配置 impala介绍 Impala集群包含一个Catalog Server (Catalogd)、一个Statestore Server (Statestored) 和若干个Impala Daemon (Impalad)。Catalogd主要负责元数据的获取和DDL的执行，Statestored主要负…...

编程日记 2023/9/23 21:07:42

如何在macOS上安装Go并搭建本地编程环境

引言 Go是一种诞生于挫折中的编程语言。在谷歌，开发人员厌倦了在为新项目选择语言时必须做出权衡。有些语言执行效率很高，但需要很长时间编译，而另一些语言易于编写，但在生产环境中运行效率很低。因此，谷歌发明了Go语…...

编程日记 2023/9/23 21:06:41

postgresql-存储过程

postgresql-存储过程简述PL/pgSQL 代码块结构示例嵌套子块声明与赋值控制结构IF 语句CASE 语句简单case语句搜索 CASE 语句循环语句continuewhilefor语句遍历查询结果 foreach 游标游标传参错误处理报告错误和信息检查断言捕获异常自定义函数重载VARIADIC 存储过程示例事务…...

编程日记 2023/9/23 21:05:39

改造user ，使得userId相同视为一个对象，user是Key，User的username做value

如果您想要将具有相同userId的用户视为一个对象，其中User对象是键，而User对象的username是值，您可以使用Java的Map<User, String>数据结构来实现。以下是示例代码： java import java.util.*;class User {private int userI…...

编程日记 2023/9/23 21:04:39

力扣刷题-数组-滑动窗口法相关题目总结

209. 长度最小的子数组（最小滑窗） 给定一个含有 n 个正整数的数组和一个正整数 s ，找出该数组中满足其和 ≥ s 的长度最小的连续子数组，并返回其长度。如果不存在符合条件的子数组，返回 0。示例： 输入&…...

编程日记 2023/9/23 21:03:38

Qt创建线程(线程池)

1.线程池可以创建线程统一的管理线程（统一创建、释放线程） 2.使用线程池方法实现点击开始按钮生成10000个随机数，然后分别使用冒泡排序和快速排序排序这10000个随机数，最后在窗口显示排序后的数字： mainwindow.h文件…...

编程日记 2023/9/23 21:02:37

【Java】泛型之使用泛型

使用ArrayList时，如果不定义泛型类型时，泛型类型实际上就是 Object： // 编译器警告: List list new ArrayList(); list.add("Hello"); list.add("World"); String first (String) list.get(0); String second (Strin…...

编程日记 2023/9/23 20:58:33

消费者NPS调查，帮您了解客户满意度！

随着市场竞争的日益激烈，了解消费者需求和对企业品牌的认知程度，对于企业的持续发展至关重要。您的客户对您的产品或服务有多满意?您是否想提升客户忠诚度，从而增加业务的持续增长?群狼调研(长沙产品包装测试)为您提供全新的消费者NPS调查服…...

编程日记 2023/9/23 20:57:32

Webpack监视文件修改，自动重新打包文件

方法一：使用watch监视文件变化在终端中输入以下指令： npx webpack --watch 我们使用这种方法监听文件变化时只会监听我们计算机本地的文件变化，在开发场景中我们的项目是要部署到服务器中的，因此这种方式并不推荐。方法二&…...

编程日记 2023/9/23 20:56:31

list容器排序案例

案例描述:将Perspn自定义数据类型进行排序，Person中属性有姓名、年龄、身高排序规则:按照年龄进行升序，如果年龄相同按照身高进行降序代码示例 #include <iostream> #include <string.h> #include <iterator> #include <vector…...

编程日记 2023/9/23 20:55:30

PHP使用Analysis中英文分词

1、下载Analysis，创建test.php测试 2、引入Analysis实现中文分词 <?php include "./Analysis/Analysis.php";$annew \WordAnalysis\Analysis(); $content"机器学习是一门重要的技术，可以用于数据分析和模式识别。"; //10分词数…...

编程日记 2023/9/23 20:54:29

视频汇聚/视频云存储/视频监控管理平台EasyCVR录像存储功能如何优化？具体步骤是什么？

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同，支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。视频监控系统EasyCVR拓展性强，视频能力丰富，具体可实现视频监控直播、视频轮播、视频录像、云存储、…...

编程日记 2023/9/23 20:52:26

Web服务（Web Service）

简介 Web服务（Web Service）是一种Web应用开发技术，用XML描述、发布、发现Web服务。它可以跨平台、进行分布式部署。 Web服务包含了一套标准，例如SOAP、WSDL、UDDI，定义了应用程序如何在Web上实现互操作。 Web服务的服…...

编程日记 2023/9/23 20:51:26

Java第4章类的继承

目录内容说明章节内容一、继承的概念二、继承的使用 extends关键字...

编程日记 2023/9/23 20:50:25

Linux网络和安全：配置、远程访问与防御指南

文章目录 Linux 网络和安全引言网络配置IP地址配置配置网络接口防火墙设置安全性加强 Linux网络配置及端口管理网络配置命令端口管理防火墙和安全性设置防火墙管理工具安全性设置 Linux远程访问技术：SSH和VPNSSHVPN Linux软件和服务网络工具文件传输VPN技术安全审计…...

编程日记 2023/9/23 20:49:22

如何搭建Linux环境

W...Y的主页 😊 代码仓库分享 💕 当我们想要搭建一个Linux系统，我们应该怎么使用呢？ 今天我就带领大家搭建Linux系统！！！ 目录 Linux环境安装双系统（不推荐） poww…...

编程日记 2023/9/23 20:48:22

【解决方案】edge浏览器批量添加到集锦功能消失的解决方案

edge的集锦功能很好用，右键标签页会出现如下选项： 但在某次edge更新后，右键标签页不再出现该选项： 这里可以参考为什么我的Edge浏览器右键标签页没有“将所有标签页添加到集锦”功能？ - Microsoft Community 一文提出…...

编程日记 2023/9/23 20:47:21

JS操作字符串方法学习系列（1）-每天学习10个方法

目录 **字符串连接 (Concatenation)**:**字符串长度 (Length)**:**字符串查找 (Search)**:**字符串替换 (Replace)**:**字符串分割 (Split)**:**字符串大小写转换 (Case Conversion)**:**字符串切片 (Slice)**:**字符串删除空白 (Trim)**:**字符串检查开头和结尾 (Starts/EndsW…...

编程日记 2023/9/23 20:46:20

iterator和generator

iterator和generator iterator es6: let/const ...展开迭代器是一种机制，比如在控制台输出Iterator是没有这个类的，为不同的数据结构提供迭代循环的机制。迭代器对象：具备next方法，next能够对你指定的数据进行迭代循环&#x…...

编程日记 2023/9/23 20:45:19

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2026/2/8 15:03:06

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2026/2/8 4:37:24

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

零基础设计模式——行为型模式 - 责任链模式

第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。核心思想：使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

Device Mapper 机制

Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...

编程新知 2025/12/14 13:11:33

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/1 14:51:21

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2026/2/6 6:05:11