开发一个npm组件包

news2024/12/22 18:07:50

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

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

效果

在这里插入图片描述

有用就帮我点个赞吧 谢谢

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

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

相关文章

linux 免交互

Linux 免交互 1、免交互概念2、基本免交互的例子2.1命令行免交互统计2.2使用脚本免交互统计2.3使用免交互命令打印2.4免交互修改密码2.5重定向查看2.6重定向到指定文件2.7重定向直接指定文件2.8使用脚本完成重定向输入2.9免交互脚本完成赋值变量2.10关闭变量替换功能&#xff0…

一分钟学算法-递归-斐波那契数列递归解法及优化

一分钟学一个算法题目。 今天我们要学习的是用递归算法求解斐波那契数列。 首先我们要知道什么是斐波那契数列。 斐波那契数列,又称黄金分割数列,是一个经典的数学数列,其特点是第一项,第二项为1,后面每个数字都是前…

linux iptables安全技术与防火墙

linux iptables安全技术与防火墙 1、iptables防火墙基本介绍1.1netfilter/iptables关系1.2iptables防火墙默认规则表、链结构 2、iptables的四表五链2.1四表2.2五链2.3四表五链总结2.3.1 规则链之间的匹配顺序2.3.2 规则链内的匹配顺序 3、iptables的配置3.1iptables的安装3.2i…

echarts范围限制下性能问题

最近实习遇到一个问题,需要对折线图的数据进行范围限制,比如将超过100的设置为100,低于0的设置为0; 原来的代码是创建一个数组,然后遍历原数组,超过的push100,低于0的push0,在中间的…

python内置函数的源码去哪里找?

python内置函数的源码去哪里找? 我们使用的python内置函数,ctrl鼠标左键,进入源码builtins.py发现,具体的函数实现均是pass了,那这些内置函数的源码去哪里找呢? 研究了一番,发现python语言是c…

R-Meta分析核心技术教程

详情点击链接:全流程R-Meta分析核心技术教程 一,Meta分析的选题与检索 1、Meta分析的选题与文献检索 1)什么是Meta分析 2)Meta分析的选题策略 3)精确检索策略,如何检索全、检索准 4)文献的管理与清洗,如何制定文献纳入排除标准 …

边缘计算网关是如何提高物联网的效率的?

随着物联网的持续发展,物联网应用的丰富和规模的扩大,带来了海量的数据处理、传输和计算需求。 传统的“数据中央处理”模式越来越难以适应物联网的扩展速度,在这一趋势下,边缘计算在物联网系统的部署运营中就发挥出了显著的增效…

idea连接linux远程docker详细教程操作

1:修改docker配置文件docker.service vi /usr/lib/systemd/system/docker.service2:找到 ExecStart,在最后面添加 -H tcp://0.0.0.0:2375 # for containers run by docker ExecStart/usr/bin/dockerd -H fd:// --containerd/run/containerd/…

【分布式技术专题】「分布式ID系列」百度开源的分布式高性能的唯一ID生成器UidGenerator

UidGenerator是什么 UidGenerator是百度开源的一款分布式高性能的唯一ID生成器,更详细的情况可以查看官网集成文档 uid-generator是基于Twitter开源的snowflake算法实现的一款唯一主键生成器(数据库表的主键要求全局唯一是相当重要的)。要求java8及以上版本。 snow…

启英泰伦通话降噪方案,采用深度学习降噪算法,让通话更清晰

生活中的通话应用场景无处不在,如电话、对讲机、远程会议、在线教育等。普遍存在的问题是环境噪音、干扰声导致通话声音不清晰,语音失真等。 为了解决这一问题,启英泰伦基于自适应线性滤波联合非线性滤波的回声消除方案和基于深度学习的降噪…

基于CNN卷积神经网络的目标识别matlab仿真,数据库采用cifar-10

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ....................................................................... %定义网络层 lay…

vue项目配置git提交规范

vue项目配置git提交规范 一、背景介绍二、husky、lint-staged、commitlint/cli1.husky2.lint-staged3.commitlint/cli 三、具体使用1.安装依赖2.运行初始化脚本3.在package.json中配置lint-staged4.根目录新增 commitlint.config.js 4.提交测试1.提示信息格式错误时2.eslint校验…

Android Studio调试出现错误时,无法定位错误信息解决办法

做项目时运行项目会出现问题,但是找不到具体位置,如下图所示:感觉是不是很懵逼~,Log也没有显示是哪里的问题 解决方案,在右侧导航栏中选择Gradle——app——build,然后点击运行 运行结果如下,很…

LLMs训练的算力优化Computational challenges of training LLMs

当您尝试训练大型语言模型时,您仍然经常遇到的最常见问题之一是内存不足。如果您曾尝试在Nvidia GPU上训练或甚至只是加载模型,那么这个错误消息可能看起来很熟悉。 CUDA,即Compute Unified Device Architecture的缩写,是为Nvid…

Lnton羚通云算力平台OpenCV-PythonCanny边缘检测教程

Canny 边缘检测是一种经典的边缘检测算法,由 John F. Canny 在 1986 年提出。它被广泛应用于计算机视觉和图像处理领域,用于检测图像中的边缘。 ​【原理】 1. 去噪 由于边缘检测非常容易收到图像的噪声影响,第一步使用 5x5 高斯滤波去除图…

【Linux】数据链路层:以太网协议

约束不等于压迫,冷静和理性不等于冷淡和麻木。 文章目录 一、以太网帧 和 局域网转发数据包1.局域网转发的原理(基于以太网协议)2.以太网MTU与MAC地址 二、局域网中的数据碰撞1.如何解决局域网中的数据碰撞?(碰撞检测和…

[保研/考研机试] KY223 二叉排序树 华中科技大学复试上机题 C++实现

题目链接: 二叉排序树_牛客题霸_牛客网输入一系列整数,建立二叉排序树,并进行前序,中序,后序遍历。。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/437195121692722441741 描述 输入一系列整数&#x…

springMVC之视图

文章目录 前言一、ThymeleafView二、转发视图三、重定向视图四、视图控制器view-controller五、补充总结 前言 SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户。 SpringMVC视图的种类很多,默认有转发视图和…

原生轮播图的实现

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>轮播图</title><style>* {margin: 0;pad…

【网络】IP网络层和数据链路层

IP协议详解 1.概念 1.1 四层模型 应用层&#xff1a;解决如何传输数据&#xff08;依照什么格式/协议处理数据&#xff09;的问题传输层&#xff1a;解决可靠性问题网络层&#xff1a;数据往哪里传&#xff0c;怎么找到目标主机数据链路层&#xff08;物理层&#xff09;&…