把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中引入
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《空舞的巨兽》官方学习版

一个以被遗忘之地为背景的原创故事,这是一个充满悲剧的没落王国。扮演外地战士雷恩猎人(玩家),踏上危险的任务,结束困扰你自己和村庄的诅咒。你唯一的希望就是杀死不可杀死的可怕巨兽。 《空舞的巨兽》官方版 https:/…

go-zero框架快速入门

文章目录 go-zero 简介安装goctl安装go-zero启动go-zero API语言定义结构体API定义路由API格式化对齐 生成代码生成基本逻辑代码生成数据库model文件 go-zero 简介 go-zero 是一个集成了各种工程实践的 web 和 rpc 框架。通过弹性设计保障了大并发服务端的稳定性,经…

切忌 SELECT *,就算表只有一列

原文地址 尽量避免 SELECT *,即使在单列表上也是如此 – 如果你现在不同意这一点,读完这篇文章,你可能就要动摇了。 2012年的一个故事 这是我 12 年前(约 2012-2013 年)在客户后台应用程序中遇到的一个真实故事。 当…

了解RabbitMQ中的Exchange:深入解析与实践应用

在分布式系统设计中,消息队列(Message Queue)扮演着至关重要的角色,而RabbitMQ作为开源消息代理软件的佼佼者,以其高性能、高可用性和丰富的功能特性,成为了众多开发者的首选。在RabbitMQ的核心组件中&…

【linux系统之redis6】redis的基础命令使用及springboot连接redis

redis的基础命令很多,大部分我们都可以在官网上找到,真的用的时候可以去官网找,不用全部记住这些命令 redis通用的基础命令的使用 代码测试 string类型常见的命令 key值的结构,可以区分不同的需求不同的业务名字 hash类型 创建…

基于FPGA的交通信号灯实现 (verilog极简实现)

本文分享利用FPGA实现的交通信号灯,FPGA型号为野火征途Pro开发板,具体功能如下: 此项目旨在模拟东西和南北两路口交通信号灯,初始态两路口均为红灯亮,接着,东西路口绿灯亮,南北路口红灯亮&…

在K8S上部署OceanBase的最佳实践

在K8S上部署OceanBase的最佳实践 目录 1. 背景与选型 1.1 为什么选择OB1.2 为什么选择ob-operator实现OB on K8S 2. 部署实操 2.1 环境准备2.2 安装 ob-operator2.3 配置 OB 集群2.4 配置 OBProxy 集群2.5 Headless Service 和 CoreDNS 配置2.6 监控与运维 2.6.1 Promethues部…

unity开发之shader 管道介质流动特效

效果 shader graph 如果出现下面的效果,那是因为你模型的问题,建模做贴图的时候没有设置好UV映射,只需重新设置下映射即可

【JavaWeb】2. 通用基础代码

以下内容来源:编程导航。 无论在任何后端项目中,都可以复用的代码。 1、自定义异常 自定义错误码,对错误进行收敛,便于前端统一处理。 💡 这里有 2 个小技巧: 自定义错误码时,建议跟主流的错…

Excel 技巧04 - 如何计算两个时间之差 (★)

本文讲了如何通过Excel计算两个时间的时间差。 1,计算两个时间的时间差 比如 5:50 ~ 19:40 a),用公式 相减 这样默认算出来的是机械的时间加减,即它们之间相差了 13小时50分钟 b),…

win下搭建elk并集成springboot

一、ELK 是什么? ELK 实际上是三个工具的集合,Elasticsearch Logstash Kibana,这三个工具组合形成了一套实用、易用的监控架构,很多公司利用它来搭建可视化的海量日志分析平台。 ElasticSearch ElasticSearch 是一个基于 Lucen…

JUC--线程池

线程池 七、线程池7.1线程池的概述7.2线程池的构建与参数ThreadPoolExecutor 的构造方法核心参数线程池的工作原理 Executors构造方法newFixedThreadPoolnewCachedThreadPoolnewSingleThreadExecutornewScheduledThreadPool(int corePoolSize) 为什么不推荐使用内置线程池&…

Java到底是值传递还是引用传递????

在搞懂这个问题之前, 我们要首先了解什么是值传递, 什么是引用传递? 值传递: 传递的是数据的副本,修改副本不会影响原始数据。引用传递: 传递的是数据的引用(地址),修改引用会直接影响原始数据. 也就是说,值传递和引…

屏幕显示技术再突破!海信RGB- Mini LED,让色彩“活”起来

文 | 智能相对论 作者 | 佘凯文 在今天,屏幕显示技术的日新月异,让每次技术革新都引领行业迈向新的高度。 从黑白到彩色,从标清到高清,再到超高清,回顾曾经彩电显示的技术升级,不仅都极大地提升了观众的…

豆包ai 生成动态tree 增、删、改以及上移下移 html+jquery

[豆包ai 生成动态tree 增、删、改以及上移下移 htmljquery) 人工Ai 编程 推荐一Kimi https://kimi.moonshot.cn/ 推荐二 豆包https://www.doubao.com/ 实现效果图 html 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF…

基于SMT32U575RIT单片机-中断练习

任务 查看手册对所有的拓展板上和相对应的底板的引脚对应的端口找到以下结论 通过STM32MX软件对各个引脚进行相应的配置 1.第一种切换模式电脑发送 #include "main.h" #include "icache.h" #include "usart.h" #include "gpio.h"/*…

HNU人工智能期末复习知识点整理

考纲 选择题 ( 30 分 ) (30分) (30分)&#xff1a; 15 15 15个单选 选择题范围为 PPT 内容&#xff0b;课本内容 计算、简答、推理题 ( 70 分 ) (70分) (70分)&#xff1a; 4 4 4个大题&#xff0c;每个大题 2 ∼ 3 2 \sim 3 2∼3小问 4 4 4个大题分别为&#xff1a;机器学习、…

设计DCDC的 Layout的秘诀

很多DCDC芯片的手册都有对应的PCB Layout设计要求&#xff0c;有些还会提供一些Layout示意图&#xff0c;都是大同小异的。 比如我随便列几点buck的设计要点&#xff1a; 1、输入电容器和二极管在与IC相同的面&#xff0c;尽可能在IC最近处。 2、电感靠近芯片的SW&#xff0c;输…

自动驾驶控制与规划——Project 6: A* Route Planning

目录 零、任务介绍一、算法原理1.1 A* Algorithm1.2 启发函数 二、代码实现三、结果分析四、效果展示4.1 Dijkstra距离4.2 Manhatten距离4.3 欧几里德距离4.4 对角距离 五、后记 零、任务介绍 carla-ros-bridge/src/ros-bridge/carla_shenlan_projects/carla_shenlan_a_star_p…

单纯形法的学习笔记

文章目录 A. 单纯形法概述1. 优化模型示例 B. 理论基础C. 算法思想D. 实现算法1. 线性规划的标准型2. 顶点解的理解及表示2.1 在标准型中变量取值为零的意义2.2 顶点解的表示 3. 最优性判断4. 解的更新5. 完成迭代过程 E. 单纯形法的基本概念与本文对照F. 文档源码 前言&#x…