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

开发一个npm组件包

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

网络安全(黑客)自学剖析

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

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

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

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

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

HTML基础知识点

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

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

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

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.算术运算符 - * / 默认不允许数…...

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年你需要知道的最佳预算Wi-Fi路由器清单

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

Go语言基础之流程控制

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

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

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

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&…...

STM32使用PID调速

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

【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 创建…...

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

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

DOS常见命令

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

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

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

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

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

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

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

如何用3层智能架构构建你的AI开发助手:从零到精通的完整指南

如何用3层智能架构构建你的AI开发助手&#xff1a;从零到精通的完整指南 【免费下载链接】superpowers Claude Code superpowers: core skills library 项目地址: https://gitcode.com/GitHub_Trending/su/superpowers 你是否曾想过&#xff0c;为什么有些开发者能快速完…...

LightGBM实战:极速梯度提升框架的多变量时序预测深度解析

LightGBM实战&#xff1a;极速梯度提升框架的多变量时序预测深度解析 【免费下载链接】LightGBM microsoft/LightGBM: LightGBM 是微软开发的一款梯度提升机&#xff08;Gradient Boosting Machine, GBM&#xff09;框架&#xff0c;具有高效、分布式和并行化等特点&#xff0c…...

PvZ Toolkit:植物大战僵尸游戏体验增强工具全解析

PvZ Toolkit&#xff1a;植物大战僵尸游戏体验增强工具全解析 【免费下载链接】pvztoolkit 植物大战僵尸 PC 版综合修改器 项目地址: https://gitcode.com/gh_mirrors/pv/pvztoolkit 问题引入&#xff1a;植物大战僵尸玩家的共同痛点 在植物大战僵尸游戏过程中&#xf…...

手把手教你解决winget的InternetOpenUrl() failed错误(含GitHub镜像加速)

深度解析winget的InternetOpenUrl() failed错误及高效解决方案 当你满怀期待地打开终端&#xff0c;准备用winget快速安装一个开发工具时&#xff0c;突然跳出的"InternetOpenUrl() failed. 0x80072efd"错误提示无疑是一盆冷水。这个看似简单的网络连接问题背后&…...

签名计算效率工具:xhshow实现小红书API请求处理提速90%的技术原理揭秘

签名计算效率工具&#xff1a;xhshow实现小红书API请求处理提速90%的技术原理揭秘 【免费下载链接】xhshow 小红书xs纯算 小红书56版本xs 小红书个人主页 批量爬取数据 文章批量下载 小红书x-s x-t x-s-common x-b3-traceid search-id 旋转验证码参数纯算纯协议逆向 项目地址…...

通达信缠论画线主图实战:手把手教你5分钟搞定中枢识别与趋势线绘制

通达信缠论画线实战指南&#xff1a;5分钟掌握中枢识别与趋势线绘制技巧 在股票技术分析领域&#xff0c;缠论因其独特的结构思维和实战价值备受投资者青睐。而通达信作为国内主流证券分析软件&#xff0c;其内置的画线工具与缠论理论结合&#xff0c;能够帮助投资者快速识别关…...

LVDS信号完整性救星:Xilinx OSERDESE2+IDELAY2配置避坑指南

LVDS信号完整性救星&#xff1a;Xilinx OSERDESE2IDELAY2配置避坑指南 当你在Gbps级LVDS接口设计中遇到信号抖动问题时&#xff0c;是否曾盯着眼图上的毛刺束手无策&#xff1f;作为Xilinx FPGA开发者&#xff0c;我们常陷入这样的困境&#xff1a;明明按照手册配置了OSERDESE2…...

幼儿园招生报名小程序源码 微信报名系统

介绍这是一款幼儿园招生报名小程序&#xff0c;以新学期招生报名为核心&#xff0c;兼顾幼儿园环境图文展示&#xff08;室内、室外、文娱、起居&#xff09;、招生政策答疑、最新动态新闻、食谱介绍、报名项目海报分享等功能。家长可填写幼儿基本信息、住址信息、监护人信息等…...

零成本体验软路由:京东云AX1800 Pro刷iStoreOS OpenWrt的完整教程(含空间扩容技巧)

京东云AX1800 Pro软路由改造全指南&#xff1a;从刷机到空间优化的实战手册 在智能家居和高速网络需求激增的今天&#xff0c;一台性能出色的路由器已成为家庭数字生活的核心枢纽。京东云AX1800 Pro作为一款性价比极高的Wi-Fi 6路由器&#xff0c;其硬件配置远超同价位产品——…...

材料科学中的缺陷与强化:如何通过控制缺陷提升材料性能?

材料科学中的缺陷与强化&#xff1a;如何通过控制缺陷提升材料性能&#xff1f; 在材料科学领域&#xff0c;晶体缺陷常被视为材料性能的"双刃剑"。一方面&#xff0c;它们可能导致材料强度降低&#xff1b;另一方面&#xff0c;精心设计的缺陷结构却能显著提升材料性…...