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

开发一个npm组件包

news 2026/5/19 16:27:20

vue项目初始化

  • vue create mytest

在这里插入图片描述

  • 启动项目以后

组件开发

  • 开发的组件写在 package中 如下
  • 在这里插入图片描述
  • 如例 开发一个 listpage的组件 里面放了一个a链接
  • 在这里插入图片描述
  • 注册组件
  • 在这里插入图片描述
  • 配置打包
    在这里插入图片描述
"package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage --dest managerpage"target lib  打包到目标
name 打包后文件名字
dest  打包后文件夹名字
  • 执行 npm run package
  • 打包内容如图 终端切换到managerpage 自己安装 npm init -y
  • 在这里插入图片描述
  • 在这里插入图片描述

npm 发布

  • 首先在managerpage中 执行 npm init -y 安装package.json
  • 执行 npm adduser 进行 npm 登录 （输入npm的登录账号密码邮箱）
  • 执行 npm publish 进行发布

发布成功

+在这里插入图片描述
页面使用 npm i managerpage

+在这里插入图片描述
在这里插入图片描述

效果

在这里插入图片描述

有用就帮我点个赞吧 谢谢

相关文章：

开发一个npm组件包

vue项目初始化 vue create mytest 启动项目以后 组件开发 开发的组件写在 package中 如下如例 开发一个 listpage的组件 里面放了一个a链接注册组件配置打包 "package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage -…...

编程日记 2023/8/25 15:47:41

有限与无限游戏 | 真北荐书

2023佛山敏捷之旅暨DevOps Meetup志愿者为进行大会的组织与准备，每周三晚有一个例会。 例会前等人的时间，涌现出一个小的分享环节。今天分享这本书：《有限与无限游戏》。 大家选择成为志愿者，是一个无限游戏。而组织活动和完成各种…...

编程日记 2023/8/25 15:46:40

网络安全（黑客）自学剖析

想自学网络安全（黑客技术）首先你得了解什么是网络安全！什么是黑客！ 网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全…...

编程日记 2023/8/25 15:45:39

Leetcode每日一题：1267. 统计参与通信的服务器

原题 这里有一幅服务器分布图，服务器的位置标识在 m * n 的整数矩阵网格 grid 中，1 表示单元格上有服务器，0 表示没有。 如果两台服务器位于同一行或者同一列，我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其…...

编程日记 2023/8/25 15:44:37

HarmonyOS开发：超详细了解项目的工程结构

前言 系列文章目录： HarmonyOS开发第一步，熟知开发工具DevEco Studio 当我们熟练的掌握了DevEco Studio之后，就可以创建项目进行练习了，和市场上大多数IDE一样，DevEco Studio也给我们提供了很多的实例模板&#xff0c…...

编程日记 2023/8/25 15:43:36

HTML基础知识点

目录 ​编辑一、使用 vscode 二、研究代码的特点 三、HTML 常见标签 注释标签 标题标签 段落标签 换行标签 格式化标签 图片标签 超链接标签 表格标签 列表标签 表单标签： form 标签 input标签： select textarea标签： 无语…...

编程日记 2023/8/25 15:42:36

基于CBAM-CNN卷积神经网络预测研究（Python代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/25 15:41:34

iOS开发Swift-基本运算符

1.一元、二元、三元运算符 一元单一操作对象-a !b c!二元两个操作对象2 3三元三目运算符a ? b : c 2.赋值运算符() let a 10 var b 5 b a let (x, y) (1, 2)赋值运算符不返回任何值，所以 if x y { ... } 无效。 3.算术运算符 - * / 默认不允许数…...

编程日记 2023/8/25 15:40:32

Flink java 工具类

flink 环境构建工具类 public class ExecutionEnvUtil {/*** 从配置文件中读取配置(生效优先级&#xff1a;配置文件<命令行参数<系统参数&#xff09;** param args* return org.apache.flink.api.java.utils.ParameterTool* date 2023/8/4 - 10:05 AM*/public static …...

编程日记 2023/8/25 15:39:31

2023年你需要知道的最佳预算Wi-Fi路由器清单

买新路由器？让我们帮助你挑选一些既有很多功能和性能，又经济实惠的产品。 购买Wi-Fi路由器并不一定要倾家荡产，尤其是如果你不需要一个提供数百Mbps速度的路由器。廉价路由器是一个很好的选择，它包含了许多功能，不会对钱包造成影响。 一、2023年在廉价Wi-Fi路由器中寻找…...

编程日记 2023/8/25 15:38:30

Go语言基础之流程控制

流程控制是每种编程语言控制逻辑走向和执行次序的重要部分&#xff0c;流程控制可以说是一门语言的“经脉”。 Go语言中最常用的流程控制有if和for&#xff0c;而switch和goto主要是为了简化代码、降低重复代码而生的结构&#xff0c;属于扩展类的流程控制。 if else(分支结构…...

编程日记 2023/8/25 15:37:29

Git 安装、配置并把项目托管到码云 Gitee

错误聚集篇&#xff1a; 由于我 git 碰见大量错误&#xff0c;所以集合了一下&#xff1a; git 把项目托管到 码云出现的错误集合_打不着的大喇叭的博客-CSDN博客https://blog.csdn.net/weixin_49931650/article/details/132460492 1、安装 git 1.1 安装步骤 1.1.1 下载对应…...

编程日记 2023/8/25 15:36:26

C++信息学奥赛1147：最高分数的学生姓名

#include <iostream> #include <string> using namespace std; int main() {int n;// 输入一个整数ncin>>n;cin.ignore();string arr;string str;int max0;int fen;// 循环读取n个评分和对应的字符串for(int i0;i<n;i){cin>>fen>>arr;if(fen&…...

编程日记 2023/8/25 15:35:25

STM32使用PID调速

STM32使用PID调速 PID原理 PID算法是一种闭环控制系统中常用的算法&#xff0c;它结合了比例&#xff08;P&#xff09;、积分&#xff08;I&#xff09;和微分&#xff08;D&#xff09;三个环节&#xff0c;以实现对系统的控制。它的目的是使 控制系统的输出值尽可能接近预…...

编程日记 2023/8/25 15:34:24

【UE5：CesiumForUnreal】——3DTiles数据属性查询和单体高亮

目录 0.1 效果展示 0.2 实现步骤 1 数据准备 2 属性查询 2.1 射线检测 2.2 获取FeatureID 2.3 属性查询 2.4 属性显示 3 单体高亮 3.1 构建材质参数集 3.2 材质参数设置 3.3 添加Cesium Encode Metadata插件 3.4 从纹理中取出特定FeatureId属性信息 3.5 创建…...

编程日记 2023/8/25 15:33:23

无涯教程-PHP - 返回类型声明

在PHP 7中&#xff0c;引入了一个新函数返回类型声明&#xff0c;返回类型声明指定函数应返回的值的类型&#xff0c;可以声明返回类型的以下类型。 intfloatbooleanstringinterfacesarraycallable 有效返回类型 <?phpdeclare(strict_types1);function returnIntValue(i…...

编程日记 2023/8/25 15:32:22

DOS常见命令

DOS常见命令 DOS是什么如何打开DOScmd常见的命令集合 DOS是什么 DOC命令是我们浏览器中的终端 &#xff0c;但不同的是我们打开软件的方式 使用的是点击文件图标&#xff0c;点击图标的同时 我们也相当于使用一个命令 只是我们看不见而已 在电脑上操作的时候 通常都是使用命令…...

编程日记 2023/8/25 15:31:21

Qt应用开发(拓展篇)——示波器/图表 QCustomPlot

一、介绍 QCustomPlot是一个用于绘图和数据可视化的Qt C小部件。它没有进一步的依赖关系&#xff0c;提供友好的文档帮助。这个绘图库专注于制作好看的&#xff0c;出版质量的2D绘图&#xff0c;图形和图表&#xff0c;以及为实时可视化应用程序提供高性能。 QCustomPl…...

编程日记 2023/8/25 15:30:20

【精度丢失】后端接口返回的Long类型参数，不同浏览器解析出的结果不一样

1、业务背景 有个同事找我帮他看一个问题&#xff0c;他给前端提供了一个接口。 这个接口是用来反查id的&#xff0c;他这里这个参数正常的返回值应该是 283232039247028226。 但前端反馈他&#xff0c;前端在浏览器&#xff08;火狐&#xff09;获取的值是 283232039247028…...

编程日记 2023/8/25 15:29:19

2023年国赛 高教社杯数学建模思路 - 案例：感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…...

编程日记 2023/8/25 15:28:17

GBFR Logs：游戏数据采集与实时分析引擎的架构深度解析

GBFR Logs&#xff1a;游戏数据采集与实时分析引擎的架构深度解析 【免费下载链接】gbfr-logs GBFR Logs lets you track damage statistics with a nice overlay DPS meter for Granblue Fantasy: Relink. 项目地址: https://gitcode.com/gh_mirrors/gb/gbfr-logs 在游…...

编程新知 2026/5/19 16:26:35

VisualHMI灵敏度调校全攻略：从触摸校准到性能优化

1. 项目概述&#xff1a;从“调参”到“调感”的界面设计进阶在工业HMI&#xff08;人机界面&#xff09;开发领域&#xff0c;尤其是使用像VisualHMI这类图形化设计软件时&#xff0c;“调节灵敏度”这个需求&#xff0c;远不止是拖动一个滑块、输入一个数值那么简单。它背后牵…...

编程新知 2026/5/19 13:06:41

如何永久保存微信聊天记录：WeChatMsg完全免费备份指南

如何永久保存微信聊天记录&#xff1a;WeChatMsg完全免费备份指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeCha…...

编程新知 2026/5/19 11:57:16

LeaguePrank终极指南：3分钟掌握英雄联盟个人信息自定义

LeaguePrank终极指南&#xff1a;3分钟掌握英雄联盟个人信息自定义 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 你是否厌倦了英雄联盟中千篇一律的个人资料展示&#xff1f;想要在召唤师峡谷中展示独特的自我形象&#xff…...

编程新知 2026/5/19 10:25:16

3个技巧让桌游卡牌设计效率提升5倍：EZCard自动化工具深度解析

3个技巧让桌游卡牌设计效率提升5倍&#xff1a;EZCard自动化工具深度解析 【免费下载链接】CardEditor 一款专为桌游设计师开发的批处理数值填入卡牌生成器/A card batch generator specially developed for board game designers 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/5/19 10:20:14

Allegro与OrCAD联动实操：如何安全高效地完成PCB位号‘反向同步’而不飞器件？

Allegro与OrCAD协同设计中的位号反标&#xff1a;规避风险的全流程实战指南 在复杂电子系统设计领域&#xff0c;Cadence Allegro与OrCAD的协同工作流程已成为行业标准配置。当PCB布局工程师经过多轮迭代优化器件位置后&#xff0c;如何将最终的位号变更安全地反向同步到原理图…...

编程新知 2026/5/19 9:12:43

【linux学习】linux的一些奇怪知识，方便日常使用

我是程序员小青蛙&#xff0c;下面介绍关于linux的知识。前言一些基本知识&#xff0c;方便利用&#xff0c;比如热键[tab],[ctrl]-c,[ctrl]-d,粘滞位&#xff0c;权限等&#xff1b;xshell中的复制粘贴&#xff0c;Ctrlinsert&#xff0c;复制shiftinsert->粘贴一、重要的几…...

编程新知 2026/5/19 8:45:09

Windows Subsystem for Android终极指南：5大核心优势与完整开发实战

Windows Subsystem for Android终极指南&#xff1a;5大核心优势与完整开发实战 【免费下载链接】WSA Developer-related issues and feature requests for Windows Subsystem for Android 项目地址: https://gitcode.com/gh_mirrors/ws/WSA Windows Subsystem for Andr…...

编程新知 2026/5/19 8:14:38

百度网盘直链解析工具：告别限速，3分钟实现全速下载！

百度网盘直链解析工具&#xff1a;告别限速&#xff0c;3分钟实现全速下载&#xff01; 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘那令人抓狂的下载速度而…...

编程新知 2026/5/19 7:33:11

终极Elsevier审稿追踪指南：5分钟实现智能投稿监控的完整方案

终极Elsevier审稿追踪指南&#xff1a;5分钟实现智能投稿监控的完整方案 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker 还在为Elsevier期刊投稿后的漫长等待而焦虑吗&#xff1f;每天反复登录系统查看审稿进度&…...

编程新知 2026/5/19 6:53:57