开发一个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

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

效果

在这里插入图片描述

有用就帮我点个赞吧 谢谢

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

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

相关文章

linux文本三剑客

linux文本三剑客 1、grep2、sed 1、grep 过滤 参数用法作用-igrep -i STRING xxx.txt从xxx.txt文件查找不区分大小写STRING-wgrep -w STRING xxx.txt精确匹配STRING-egrep -e STRING1 -e STRING2 xxx.txt查找多个STRING行-ngrep -n STRING xxx.txt查看STRING 在第几行-vgrep …

使用mysql:5.6和 owncloud 镜像,构建一个个人网盘。

文章目录 1、使用mysql:5.6和 owncloud 镜像,构建一个个人网盘。2、安装搭建私有仓库 Harbor3、编写Dockerfile制作Web应用系统nginx镜像,生成镜像nginx:v1.1,并推送其到私有仓库。具体要求如下:4、Dockerfile快速搭建自己专属的L…

【每日一招小技巧】编译安装提升系统自带的java版本

hello,大家好,又到了每日一招的环节,今天要给大家介绍的是,如何用源码安装的方式,升级系统自带的ava版本! 首先,我们要查看一下我们系统自带的java版本是多少,怎么查看呢&#xff1…

机器学习简介

文章目录 引言1. 从找规律说起2. 机器学习应用2.1 有监督学习2.2 无监督学习2.2.1 聚类2.2.2 降维 3. 机器学习一般流程4. 机器学习常用概念5. 深度学习简介5.1 引入 -- 猜数字5.2 深度学习5.2.1 隐含层/中间层5.2.2 随机初始化5.2.3 损失函数5.2.4 导数与梯度5.2.5 梯度下降5.…

协议的分层结构

1.1TCP/IP 协议 为了使各种不同的计算机之间可以互联,ARPANet指定了一套计算机通信协议,即TCP/IP 协议(族). 注意TCP /IP 协议族指的不只是这两个协议 而是很多协议, 只要联网的都使用TCP/IP协议族 为了减少 协议设计的复杂度 ,大…

【Nginx】Nginx 简介

Ngnix 特点 模块化设计:良好的扩展性,可以通过模块方式进行功能扩展。高可靠性:主控进程和 worker 是同步实现的,一个 worker 出现问题,会立刻启动另一个 worker。内存消耗低:一万个长连接(kee…

Php“牵手”淘宝商品销量数据采集方法,淘宝API接口申请指南

淘宝天猫商品销量接口 API 是开放平台提供的一种 API 接口,它可以帮助开发者获取商品的详细信息,包括商品的标题、描述、图片,月销量,总销量等信息。在电商平台的开发中,销量接口API是非常常用的 API,因此本…

什么是遗传算法(Genetic Algorithm,简称 GA)?

目录 一、遗传算法介绍二、遗传算法应用场景三、遗传算法具体案列1、求解旅行商问题(TSP 问题)2、求解一个矩阵中的最大值3、基于遗传算法的图像压缩方法 四、遗传算法重要意义五、生物进化与遗传算法之间的关系 一、遗传算法介绍 遗传算法(…

天润融通「微藤大语言模型平台2.0」以知识驱动企业高速增长

8月23日,天润融通(又称“天润云”,2167.HK),正式发布「微藤大语言模型平台2.0」。 “大模型企业知识企业知识工程”。 “不能有效记录和管理知识的企业是不能持续进步的。在企业的生产流程中,相比于其他场景&#xff0…

【网络安全】防火墙知识点全面图解(二)

本系列文章包含: 【网络安全】防火墙知识点全面图解(一)【网络安全】防火墙知识点全面图解(二) 防火墙知识点全面图解(二) 21、路由器的访问控制列表是什么样的?22、防火墙的安全策…

情人节定制:HTML5 Canvas全屏七夕爱心表白特效

❤️ 前言 “这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”,七夕节表白日,你要错过吗?如果你言辞不善,羞于开口的话,可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效,全屏的爱心和…

【无标题】idea 中 SpringBoot 点击运行没反应,按钮成灰色

问题描述 在使用 Spring Boot 开发项目时,可能会遇到一个问题:点击运行按钮后,控制台没有任何输出,项目界面也没有显示。这种情况可能是由多种原因导致的,本文将介绍一些常见的解决方法。 解决方法 首先看下Groovy插…

AndroidStudio升级后总是Read Time Out的解决办法

AndroidStudio升级后在gradle的时候总是Time out,遇到过多次,总结一下解决办法 1、gradle下载超时 在工程目录../gradle/wrapper/gradle-wrapper.properties中找到gradle版本的下载链接,如下图: 将其复制到迅雷里下载&#xff0…

⛳ Java 网络编程

目录 ⛳ Java 网络编程🎨 一、TCP / IP 协议👣 二、IP 和 端口号🎁 三、TCP 网络层编程🎨 3.1、Socket⭐ 3.2、基于Socket的TCP编程 🏭 四、UDP网络编程🐾 五、URL编程 ⛳ Java 网络编程 🎨 一…

JavaSE 数组

定义: int []arr; int arr[]; 初始化 // 完整格式 int arr[] new int[]{1, 2, 3}; // 简单格式 int arr[] {1, 2, 3}; 数组的元素访问、遍历 按照下标访问即可。数组的长度函数为 arr.length()。idea快速生成遍历的方法:数组名.fori 静态初始化 &a…

MySQL-Centos下MySQL5.7安装教程

MySQL安装教程 一,卸载MySQL二,安装MySQL三,mysql登录四,修改配置文件 一,卸载MySQL 1.如果你的机器上mysqld服务器还在运行,那么第一步就是要停掉服务。 systemctl stop mysqld;2.查看系统中安装的关于m…

智慧城市能实现嘛?数字孪生又在其中扮演什么角色?

数字孪生智慧城市是将数字孪生技术与城市智能化相结合的新兴概念,旨在通过实时数字模拟城市运行,优化城市管理与服务,创造更智能、高效、可持续的城市环境。 在智慧城市中,数字孪生技术可以实时收集、分析城市各个方面的数据&…

solidity0.8.0的应用案例13:数字签名及应用:NFT白名单

以太坊中的数字签名ECDSA,以及如何利用它发放NFT白名单 代码中的ECDSA库由OpenZeppelin的同名库简化而成。 数字签名 如果你用过opensea交易NFT,对签名就不会陌生。下图是小狐狸(metamask)钱包进行签名时弹出的窗口,它可以证明你拥有私钥的同时不需要对外公布私钥。 …

使用 SQLStudio 进行数据库管理并通过 Docker Compose 进行部署

在现代软件开发中,数据库管理是一个至关重要的环节。SQLStudio 是一个强大的工具,可以帮助开发人员轻松管理数据库,现在改名成SQLynx,我们用的是旧的镜像,本文还是用SQLStudio这个名称。同时,使用 Docker C…

服务器基础

基础 介绍 可以理解为企业级的电脑,比个人使用的电脑具备更强的配置、性能、可靠性及稳定性。设计工艺和器件全部采用企业级设计,保障7*24小时稳定运行。 演进历史 处理性能 外观 发展方向 分类 按外形分类 按高度分类 按应用分类 按综合能力分类…