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

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

news 来源：原创 2025/5/18 12:50:27

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

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

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

编程日记 2025/5/18 12:50:27

遇到复杂的递归查询sql 需要oracle 转pgsql 可以把数据表结构给ai

遇到复杂的递归查询sql 需要oracle 转pgsql 可以把数据表结构给ai 并且建立备份表把需要的很少的数据放到表里面这样 ai 可以很好的判断sql 咋写还可以，让ai解释oracle sql 然后拿到描述和表和字段，给ai让他生成pgsql 的sql，亲测有效...

编程日记 2025/5/18 12:42:17

smell---Paddle-DI

跨模态文档智能大模型–Ernie-Layout 目标：提取文档中无结构或半结构化的知识 github项目地址 Paddle NLP ERNIE-Layout基于Transformer Encode架构，并提出以下trick： 1、OCR工具提取信息借助OCR工具提取图片中的文字及文字对应的坐标信息…...

编程日记 2025/5/18 12:42:18

【JavaWeb后端学习笔记】MySQL的数据控制语言（Data Control Language，DCL）

MySQL DCL 1、管理用户2、控制权限 DCL英文全称是Data Control Language（数据控制语言），用来管理数据库用户、控制数据库访问权限。 1、管理用户管理用户的操作都需要在MySQL自带的 mysql 数据库中进行。 -- 查询用户 -- 需要先切换到MyS…...

编程日记 2025/5/15 14:58:20

python +tkinter绘制彩虹和云朵

python tkinter绘制彩虹和云朵彩虹，简称虹，是气象中的一种光学现象，当太阳光照射到半空中的水滴，光线被折射及反射，在天空上形成拱形的七彩光谱，由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实…...

编程日记 2025/5/14 4:20:51

【银河麒麟高级服务器操作系统实例】tcp半链接数溢出分析及处理全过程

了解更多银河麒麟操作系统全新产品，请点击访问麒麟软件产品专区：https://product.kylinos.cn 开发者专区：https://developer.kylinos.cn 文档中心：https://document.kylinos.cn 服务器环境以及配置系统环境物理机/虚拟机/云…...

编程日记 2025/5/18 12:39:44

python实现，outlook每接收一封邮件运行检查逻辑，然后发送一封邮件给指定邮箱

以下是一个使用 Python 和 win32com.client 模块实现的示例代码，每当 Outlook 接收到一封新邮件时，执行检查逻辑并发送一封邮件到指定邮箱。这个代码依赖于 Windows 系统和安装了 Microsoft Outlook。环境准备确保安装了 pywin32 库：pip …...

编程日记 2025/5/18 2:26:46

HTML——70. 多行文本输入框

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>多行文本输入框</title></head><body><!--单行文本输入框在输入长度超过文本框长度，则超出部分会被隐藏掉（即超出部分看不到&a…...

编程日记 2025/5/14 3:35:25

leetcode题目(3)

目录 1.加一 2.二进制求和 3.x的平方根 4.爬楼梯 5.颜色分类 6.二叉树的中序遍历 1.加一 https://leetcode.cn/problems/plus-one/ class Solution { public:vector<int> plusOne(vector<int>& digits) {int n digits.size();for(int i n -1;i>0;-…...

编程日记 2025/5/13 23:05:31

Spring Security(maven项目) 3.0.2.4版本

前言： 通过实践而发现真理，又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识，又从理性认识而能动地指导革命实践，改造主观世界和客观世界。实践、认识、再实践、再认识，这种形式，循环往…...

编程日记 2025/5/18 12:31:32

ArcgisServer过了元旦忽然用不了了？许可过期

昨天过完元旦之后上班发现好多ArcgisServer的站点运行出错了，点击日志发现，说是许可过去，也就是当时安装ArcgisServer时读取的ecp文件过期了，需要重新读取。解决方法 1.临时方法，修改系统时间，早于2024年…...

编程日记 2025/5/18 11:07:24

Ubuntu22.04配置静态ip

1. 编辑网络配置文件 sudo vim /etc/netplan/00-installer-config.yaml 2.输入下面配置将静态ip设置为192.168.3.200 ，并设置路由器地址192.168.3.1，以及dns地址 223.5.5.5和223.6.6.6 dhcp4: false 表示取消动态分配ip network:ethernets:e…...

编程日记 2025/5/18 12:24:50

router 动态路由与懒加载

路由的使用静态路由静态路由: 引入组件然后挂载到router的component下,这样在页面刷新时,就会直接请求引入, 当项目越来越大时, 初始化的时间就会越来越长,因为它要将所有的页面全部引入后才会去渲染页面. 不管你当前页面有没有用到, 初始化是加载的是项目中所有组件,以及t…...

编程日记 2025/5/14 17:23:07

网络安全 | 信息安全管理体系（ISMS）认证与实施

网络安全 | 信息安全管理体系（ISMS）认证与实施一、前言二、信息安全管理体系（ISMS）概述2.1 ISMS 的定义与内涵2.2 ISMS 的核心标准 ——ISO/IEC 27001 三、信息安全管理体系（ISMS）认证3.1 认证的意义与价值…...

编程日记 2025/5/15 21:54:02

【机器学习:一、机器学习简介】

机器学习是当前人工智能领域的重要分支，其目标是通过算法从数据中提取模式和知识，并进行预测或决策。以下从机器学习概述、有监督学习和无监督学习三个方面进行介绍。机器学习概述机器学习定义机器学习（Machine Learning&#xff0…...

编程日记 2025/5/14 17:35:15

DjangoORM字段参数、常用字段类型及参数、模型和表单验证器详解

由于项目原因必须使用DjangoORM模型，所以今天整理了一下关于DjangoORM模型里的详细内容。包含字段参数、常用字段类型及参数、模型和表单验证器。一、通用字段参数这些参数可以应用于多种字段类型： （1）null：如果为 …...

编程日记 2025/5/15 12:25:17

【pyqt】（四）Designer布局

布局之前我们利用鼠标拖动的控件的时候，发现一些部件很难完成对齐这些工作，pyqt为我们提供的多种布局功能不仅可以让排版更加美观，还能够让界面自适应窗口大小的变化，使得布局美观合理。最常使用的三种布局就是垂直河子布局、水…...

编程日记 2025/5/15 12:01:01

每日一学——自动化工具（Jenkins）

3.2 Jenkins 3.2.1 CI/CD流程设计嘿，小伙伴们！今天我们来聊聊Jenkins——这个在持续集成（CI）和持续部署（CD）领域里大名鼎鼎的工具。Jenkins不仅可以帮我们自动化构建和测试代码，还能自动部署…...

编程日记 2025/5/11 18:26:11

k8s基础(1)—Kubernetes-Pod

一、Pod简介 Pod是Kubernetes（k8s）系统中可以创建和管理的最小单元，是资源对象模型中由用户创建或部署的最小资源对象模型‌。Pod是由一个或多个容器组成的，这些容器共享存储和网络资源，可以看作是一个逻辑的主机‌。…...

编程日记 2025/5/8 6:49:22

《Java核心技术卷II》流的创建

流的创建 Collection接口中stream方法可以将任何集合转换为一个流。用静态Stream.of转化成数组。 Stream words Stream.of(contents.split("\\PL")); of方法具有可变长参数，可以构建具有任意数量的流。使用Array.stream(array,from,to)可以用数组…...

编程日记 2025/5/14 5:40:45

单片机实物成品-010 智能宠物喂食系统（代码+硬件+论文）

项目介绍版本1：oled显示定时投喂（舵机模拟）声光报警显示实时时间 ---演示视频： 智能宠物喂食001_哔哩哔哩_bilibili 1. STM32F103C8T6 单片机进行数据处理 2. OLED 液晶显示 3，按键1 在数据显示界面时按下按键1切…...

编程日记 2025/5/18 12:24:50

我用AI学Android Jetpack Compose之开篇

打算写一个系列，我用AI学Android Jetpack Compose，本教程需要有一定Android开发基础的同学，至少能运行成功Hello World！会基本的Java或Kotlin语法，如果不会，先去学习基本的Android应用开发，推荐…...

编程日记 2025/5/14 11:19:18

算法题（24）：只出现一次的数字（二）

审题： 数组中除了答案元素只出现一次外，其他元素都会出现三次，我们需要找到并返回答案元素思路： 由于现在会出现三次，所以利用异或运算符的方法就会失效。而所有数据都在32位二进制范围内，所以我们采用依次…...

编程日记 2025/5/14 15:56:20

计算机网络（15）宽带接入技术

前言计算机网络宽带接入技术是指通过高速、大容量的通信信道或网络，实现用户与互联网或其他通信网络之间的高速连接。一、宽带接入技术的定义与特点定义：宽带接入技术是指能够传输大量数据的通信信道或网络，其传输速度通常较高&#xff0c…...

编程日记 2025/5/18 12:26:46

什么是索引

在数据库管理系统中，索引是一种数据结构，用于快速定位数据库表中的特定记录。索引类似于一本书的目录，可以帮助数据库引擎迅速找到所需的数据，而不必扫描整个表。类型：常见的数据库索引类型包括B树索引、哈希索引、全…...

编程日记 2025/5/15 0:12:03

【数据结构】树链刨分

1 u v k，修改路径上节点权值，将节点 uu 和节点 vv 之间路径上的所有节点（包括这两个节点）的权值增加 kk。2 u k，修改子树上节点权值，将以节点 uu 为根的子树上的所有节点的权值增加 kk。3 u v，询…...

编程日记 2025/5/5 21:25:30

perl包安装的CPAN大坑

先看一个用cpan安装的例子。 $cpan -i App::cpanminus Loading internal logger. Log::Log4perl recommended for better logging Reading /home/wubin/.cpan/MetadataDatabase was generated on Tue, 24 Dec 2024 15:29:01 GMT Running install for module App::cpanminusTry…...

编程日记 2025/5/17 21:31:35

打造三甲医院人工智能矩阵新引擎（四）：医疗趋势预测大模型篇 EpiForecast与DeepHealthNet合成应用

一、引言 1.1 研究背景与意义在当今数字化时代，医疗领域积累了海量的数据，涵盖电子病历、医学影像、基因序列、临床检验结果等多源异构信息。这些数据蕴含着疾病发生发展、治疗反应、疫情传播等规律，为医疗趋势预测提供了数据基础。准确的医疗趋势预测能辅助医疗机构提前…...

编程日记 2025/5/18 12:40:56

RSA e与phi不互质（AMM算法进行有限域开根）

e与phi不互质这一部分学习来自trup师傅的博客针对CTFer的e与phi不互素的问题 - 跳跳糖 1：m^t<n from Crypto.Util.number import * from secret import flag flag bflag{*********} m bytes_to_long(flag) p getPrime(1024) q getPrime(1024) n p * q …...

编程日记 2025/5/18 12:22:19

021-spring-springmvc-组件

SpringMVC的handMapping 比较重要的部分比较重要的部分比较重要的部分关于组件的部分这里以 RequestMappingHandlerMapping 为例子默认的3个组件是： org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping org.springframework.web.servlet.mvc…...

编程日记 2025/5/13 22:04:15

【Leecode】Leecode刷题之路第99天之恢复二叉搜索树

题目出处 99-恢复二叉搜索树-题目出处题目描述个人解法思路： todo代码示例：（Java） todo复杂度分析 todo官方解法 99-恢复二叉搜索树-官方解法方法1：显式中序遍历思路： 代码示例：&…...

编程日记 2025/5/14 10:00:22

【从零开始入门unity游戏开发之——C#篇41】C#迭代器（Iterator）——自定义类实现 foreach 操作

文章目录前言一、什么是迭代器？二、标准迭代器的实现方法1、自定义一个类CustomList2、让CustomList继承IEnumerable接口3、再继承IEnumerator接口4、完善迭代器功能5、**foreach遍历的本质**：6、在Reset方法里把光标复原三、用yield return语法糖实现…...

编程日记 2025/5/13 7:41:11

运算符重载 - 自定义运算符行为

引言 C 是一种支持面向对象编程（OOP）的编程语言，它允许程序员通过运算符重载来自定义类的行为。运算符重载使得我们可以为自定义类型定义与内置类型相似的操作方式，从而使代码更加直观和易读。本文将详细介绍 C 中的运算符重载…...

编程日记 2025/5/14 5:55:58

RabbitMQ-基本使用

RabbitMQ: One broker to queue them all | RabbitMQ 官方安装到Docker中 docker run \-e RABBITMQ_DEFAULT_USERrabbit \-e RABBITMQ_DEFAULT_PASSrabbit \-v mq-plugins:/plugins \--name mq \--hostname mq \-p 15672:15672 \-p 5672:5672 \--network mynet\-d \rabbitmq:3…...

编程日记 2025/5/16 10:06:12

相关文章：