把vue项目或者vue组件发布成npm包或者打包成lib库文件本地使用

将vue项目发布成npm库文件,第三方通过npm依赖安装使用;使用最近公司接了一个项目,这个项目需要集成到第三方页面,在第三方页面点击项目名称,页面变成我们的项目页面;要求以npm库文件提供给他们;

发布和删除自定的npm包(基于vue/cli4)(如果是私服使用可以不发布)
1、npm源设置(项目终端中执行)
阿里云镜像:npm config set registry https://registry.npmmirror.com
npm官网:npm config set registry https://registry.npmjs.org
2、创建vue项目(vue cli)
vue create xxxx (名字自己取)
创建好后npm install
3、自己的组件
在src下面新建package包(文件夹名字随便,后面配置打包命令也要用这个名字),分别创建一个文件夹(组件放这里面)和index.js文件
结构如下,
在这里插入图片描述
为了使图片能够正常打包,且从npm安装后能正常显示,需要创建vue.config.js文件(有就不用创建了),然后在该文件写上如下图所示代码 vue组件或者项目里面有图片,发布到npm图片需要正常显示
在这里插入图片描述
在package新建一个打包命令,打包命令里面的包名不能和package的name相同,不然上传到npm后,无法通过npm install 包名 安装;命令如下
“package”: "vue-cli-service build --target lib ./src/package/index.js/ --name xxxxx --dest xxxxx " (xxxxx是包名)
在这里插入图片描述
项目终端中运行npm run package会生成 xxxxx 文件夹
cd 进入 xxxxx 文件夹执行 npm init -y ,会产生一个package.json文件如下
在这里插入图片描述
version是版本信息,每次更新版本递增,如果想减小包体积,可以删除一些不必要的文件保留必要文件,箭头所指为必要文件;

发布包之前,把npm源更换为官网源
在包终端中执行 npm login 跟着提示填写用户名、密码、邮箱、邮箱验证码
然后执行命令 npm publish 将包上传到npm
执行 npm install xxxxx 可以下载包

同时还可以继续优化文件结构,新建style文件夹,将xxxxx.umd.min.js改为 index.js,把package的main入口改为index.js;
在这里插入图片描述
同时新建一个readme.md文件,描述组件使用方法
在这里插入图片描述

在发布包之前验证包的各项功能是否正常,可以在main.js中引入
在这里插入图片描述

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

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

相关文章

STM32 NOR FLASH(SPI FLASH)驱动移植(2)

2)FLASH 读取函数 /* * brief 读取 SPI FLASH * note 在指定地址开始读取指定长度的数据 * param pbuf : 数据存储区 * param addr : 开始读取的地址(最大 32bit) * param datalen : 要读取的字节数(最大 65535) * retval 无 */ void norflash_read(uint8_t *pbuf…

自从学会Git,感觉打开了一扇新大门

“同事让我用 Git 提交代码,我居然直接把项目文件压缩发过去了……”相信很多初学者都经历过类似的窘境。而当你真正掌握 Git 时,才会发现它就像一本魔法书,轻松解决代码管理的种种难题。 为什么 Git 能成为程序员的标配工具?它究…

【重庆】《政务数字化应用费用测算规范》(T/CDCIDA 001—2023)-省市费用标准解读系列36

《政务数字化应用费用测算规范(报批稿)》于2023年11月18日实施,本文件按照GB/T 1.1-2020给出的规则起草,主要适用于重庆政务数字化应用项目的费用测算。我司基于专业第三方信息化项目造价机构角度,从标准创新点、定制软…

Python | 学习type()方法动态创建类

getattr方法的使用场景是在访问不存在的属性时,会触发该方法中的处理逻辑。尤其是在动态属性获取中结合 type()动态创建类有着良好的使用关系。 type()方法常用来判断属性的类别,而动态创建类不常使用,通过如下的几个实例来学习使用&#xff…

机器学习之逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告

逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告 目录 逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告1 逻辑回归算法1.1 概念理解1.2 算法导入1.3 算法优缺点 2 LogisticRegression理解2.1查看参数定义2.2 参数理解2.3 方法2.4基本格式 3 数据标准…

.NET在中国的就业前景:开源与跨平台带来的新机遇

随着技术的不断发展和市场需求的变化,.NET在中国的就业前景正变得愈加广阔。尤其是在开源和跨平台的推动下,越来越多的中国中小型企业选择了.NET技术作为其开发平台,进一步提升了.NET技术人才的市场需求。尽管在中国市场,.NET的市…

Linux(Ubuntu24.04)源码编译安装VTK7.1.1记录

VTK(Visualization Toolkit)是一个开源的3D可视化开发工具包,用于开发可视化和图形处理应用程序。VTK提供了一系列的算法和工具,用于创建、渲染和处理复杂的3D图形和数据。VTK由C编写,并提供了Python、Java和Tcl等语言…

Hadoop解决数据倾斜方法

数据倾斜是指在分布式数据处理过程中,数据在某些节点上的分布不均匀,导致这些节点的处理负载过重,而其他节点的资源闲置,从而影响整个系统的性能。在 Hadoop 中,以下是一些解决数据倾斜的方法: 1. 数据预处…

【人工智能】人工智能与大模型

人工智能与大模型的结合正在深刻改变多个行业和领域的格局。 1. 人工智能 (AI) 人工智能指的是使计算机或机器具备模拟人类智能的能力,包括学习、推理、问题解决、自然语言处理、视觉感知等。AI的发展可以分为几个阶段: 弱人工智能 (Narrow AI)&#…

安卓11 SysteUI添加按钮以及下拉状态栏的色温调节按钮

最近客户想要做一个台灯产品,需要实现 串口调节台灯功能 ,其中包括 亮度调节 色温调节 开关 三个功能 话不多说,贴代码 diff --git a/packages/SystemUI/AndroidManifest.xml b/packages/SystemUI/AndroidManifest.xml old mode 100644 new …

node.js下载、安装、设置国内镜像源(永久)(Windows11)

目录 node-v20.18.0-x64 工具下载安装设置国内镜像源(永久) node-v20.18.0-x64 工具 系统:Windows 11 下载 官网https://nodejs.org/zh-cn/download/package-manager 版本我是跟着老师选的node-v20.18.0-x64如图选择 Windows、x64、v2…

如何轻松安全地销售旧 Android 手机

众所周知,手机不断更新换代。当您想要的手机终于到货时,您可能迫不及待地将旧 Android 手机更新为最新手机。在此之前,你们中的一些人可能会考虑以最多的钱卖掉旧的Android手机。 但永远不要冲动地卖掉你的旧 Android 手机!为了安…

欧科云链研究院:ChatGPT 眼中的 Web3

编辑|OKG Research 转眼间,2024年已经进入尾声,Web3 行业经历了热闹非凡的一年。今年注定也是属于AI的重要一年,OKG Research 决定拉上 ChatGPT 这位“最懂归纳的AI拍档”,尝试把一整年的研究内容浓缩成精华。我们一共…

【从零开始入门unity游戏开发之——unity篇04】unity6基础入门——场景窗口(Scene)和层级窗口(Hierarchy)介绍

文章目录 场景窗口(Scene)和层级窗口(Hierarchy)一、层级窗口(Hierarchy)1、添加新的对象(物体)2、Hierarchy层级窗口快捷键3、搜索 二、Scene场景窗口1、工具栏控制台2、操作物体位…

Jboss EnhancedQueueExecutor 使用案例及源码解读

使用案例 EnhancedQueueExecutor配置类 Configuration Slf4j public class EnhancedQueueExecutorConfig {Beanpublic EnhancedQueueExecutor enhancedQueueExecutor() {return createExecutor(5, 100,"enhancedQueueExecutor","任务处理失败 {}");}priv…

如何确保涡度通量观测数据的准确性?涡度通量光敏感性分析、温度敏感性分析、数据风浪区分析等

确保涡度通量观测数据的准确性,可以采取以下几个步骤: 1.数据预处理:在进行数据分析之前,需要对原始的高频涡度通量数据进行预处理,包括剔除异常值和进行数据缺失插补。异常值剔除可以通过设定合理的阈值来识别并剔除数…

docker镜像构建(基于ISO)

1. 前言 本文详细介绍如何基于kylin v10 ISO文件构建出docker image。系统环境如下: dockder: 20.10.7 linux os: kylinv 10 (GFB) linux kernel: 4.19.90-52.23.v2207.gfb01.ky10.aarch642. 构建yum离线源 2.1. 挂载ISO文件 mount Kylin-Server…

Mac中配置vscode(第一期:python开发)

1、终端中安装 xcode-select --install #mac的终端中安装该开发工具 xcode-select -p #显示当前 Xcode 命令行工具的安装路径注意:xcode-select --install是在 macOS 上安装命令行开发工具(Command Line Tools)的关键命令。安装的主要组件包括:C/C 编…

快速将索尼手机联系人导出为 HTML 文件

我想将 Sony Xperia 手机上的联系人导出到计算机上进行备份,并在需要时进行编辑。这可以做到吗?如何做到?作为助手我需要下载什么工具吗? 当您的 Android 手机上存储了如此多的重要联系人,而您又不想丢失它们时&#…

学习threejs,导入AWD格式的模型

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.AWDLoader AWD模型加…