Vue3+vite实现组件上传npm并应用

news2024/11/26 14:48:20

场景:就是A项目的组件需要在B项目中使用

下面举例的是把a项目pagination分页组件上传到npm,在b项目使用

采坑日记:封装的组件一定要起name要不调用不成功

1.1 配置打包

1.1 首先在公用组件components文件夹下创建index.js文件,

 1.2 index.js

 1.3 vite.config.js

 1.4 package.json

 执行npm run build打包,出现如图文件夹则代表打包成功

 2.1 上传npm官网

2.1 cd lc-project 执行npm init -y,我的配置如下图

name:上传后的名称

description:版本描述

version:版本号

 2.2 上传到npm,首先得注册个npm账号 官网 记住用户名、密码和邮箱,发布的时候会用到

 2.3 设置npm源,一般都是淘宝镜像,需要切换官方镜像

npm config set registry=https://registry.npmjs.org

 2.4 文件根目录打开终端,输入npm login

   2.5 在v3-o\lc-project目录下执行 npm publish 命令,出现  + lc-project@1.0.1 则代表上传成功,可以官网查看下

 3.1 B项目中应用

  3.1 打开终端执行npm i lc-project

  3.2然后在main.js中

import "../node_modules/lc-project/style.css"; //引入组件样式
import lcProject from "lc-project"; //引入下载后的组件
app.use(lcProject);
app.mount("#app");

  3.3 在B项目组件中直接使用就行

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

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

相关文章

JavaSwing+MySQL的小区物业管理系统

点击以下链接获取源码: https://download.csdn.net/download/qq_64505944/88071096 JDK1.8、MySQL5.7 《数据库原理课程设计》课程设计任务书 题 目: 小区物业管理系统 学生姓名: xxxxxx 班 级: xx 级软件工程 x 班 学 号&#…

虚继承是如何解决二义性和数据的冗余的

我们知道面向对象的三大特性分别为封装,继承,多态。在继承中,我们知道一个类可以继承另一个类,这样的关系被叫做子类(派生类)继承父类(基类),并且子类可以使用到父类的接口。但是在C中还被设计了…

ElasticSearch学习--数据聚合

介绍 数据聚合可以帮助我们对海量的数据进行统计分析,如果结合kibana,我们还能形成可视化的图形报表。自动补全可以根据用户输入的部分关键字去自动补全和提示。数据同步可以帮助我们解决es和mysql的数据一致性问题。集群可以帮助我们了解结构和不同节点…

Pytorch个人学习记录总结 08

目录 神经网络-搭建小实战和Sequential的使用 版本1——未用Sequential 版本2——用Sequential 神经网络-搭建小实战和Sequential的使用 torch.nn.Sequential的官方文档地址,模块将按照它们在构造函数中传递的顺序添加。代码实现的是下图: 版本1—…

BeanFactory容器的构建和使用示例

BeanFactory容器的实现流程: BeanFactory是Spring框架中的一部分,它提供了IoC(控制反转)的实现机制。下面是BeanFactory的IoC实现过程: 定义Bean定义:首先,我们需要在配置文件中定义Bean的定义…

[数据结构]顺序表和ArrayList

顺序表的介绍 在了解顺序表之前先了解一下什么叫做线性表: 线性表(linear list):是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构。 常见的线性表:顺序表、链表、栈、队列… 线性…

数学建模入门-如何从0开始,掌握数学建模的基本技能

一、前言 本文主要面向没有了解过数学建模的同学,帮助同学们如何快速地进行数学建模的入门并且尽快地在各类赛事中获奖,或者写出优秀的数学建模论文。 在本文中,我将从什么是数学建模、数学建模的应用领域、数学建模的基本步骤、数学建模的技…

两天学会用Webpack打包前端代码-day01

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 什么是 Webpack? 使用 Webpack 体验webpack打包过程 修改 Webpack 打包入口和出口 入口 出…

[JAVAee]线程安全

目录 线程安全的理解 线程不安全的原因 ①非原子性 ②可见性 ③代码重排序 体会何为不安全的线程 保证线程安全 一个代码在多线程的环境下就很容易出现错误. 线程安全的理解 线程安全是什么呢?通俗的来讲,线程安全就是在多线程的环境下,代码的结果是符合我们预期的,就…

R语言-数据分析及建模(第1节)分类与预测问题简介

小伙伴们,今天我们学习R语言-数据分析及建模(第1节)分类与预测问题简介 01-分类与预测问题简介 ◆分类和预测是预测问题的两种主要类型,分类主要是预测分类标号(离散属性) ,而预测主要是建立连续…

Windows11的VS201x编译OpenCV+Contrib+CUDA

(1) CUDA下载,注意要和cudnn版本号相关。 我安装的是cuda11.0,注意VS2015不能编译CUDA11,所以用VS2015的话需要下载CUDA 10。因为更高的版本目前还没有cudnn。 (2) 下载和安装VS2015。 (3) 下载和解压CMake。 CMake地址: Releases Kitw…

性能测试Ⅱ(压力测试与负载测试详解)

协议 性能理论:并发编程 ,系统调度,调度算法 监控 压力测试与负载测试的区别是什么? 负载测试 在被测系统上持续不断的增加压力,直到性能指标(响应时间等)超过预定指标或者某种资源(CPU&内存)使用已达到饱和状…

每天五分钟机器学习:多项式非线性回归模型

本文重点 在前面的课程中,我们学习了线性回归模型和非线性回归模型的区别和联系。多项式非线性回归模型是一种用于拟合非线性数据的回归模型。与线性回归模型不同,多项式非线性回归模型可以通过增加多项式的次数来适应更复杂的数据模式。在本文中,我们将介绍多项式非线性回…

[SpringMVC]仿写SpringMVC(注解开发)

文章目录 前提:1、代码结构2、核心:YhzMVC3、初始化步骤是:4、执行 前提: 当前版本无接受网络请求功能,不喜勿喷🙏🙏 本文将对代码核心进行讲解,源码已上传到gitee仓库 1、代码结构…

SpringBoot集成Druid实现数据库连接池

一、引入依赖 完整的pom文件如下所示: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http…

第四讲:MySQL中DDL一些基本数据类型及表的创建、查询

目录 1、创建表:2、DDL一些基本数据类型&#xff1a; 1、创建表: 部分单词及解析&#xff1a; 1、tables:表 2、comment:评论&#xff0c;解释 3、gender:性别 4、neighbor&#xff1a;邻居 1、创建表&#xff1a;&#xff08;注&#xff1a;在自定义数据库操作&#xff0c;…

Vue--》打造个性化医疗服务的医院预约系统(二)

今天开始使用 vue3 + ts 搭建一个医院预约系统的前台页面,因为文章会将项目的每一个地方代码的书写都会讲解到,所以本项目会分成好几篇文章进行讲解,我会在最后一篇文章中会将项目代码开源到我的GithHub上,大家可以自行去进行下载运行,希望本文章对有帮助的朋友们能多多关…

分布式锁:Redis、Zookeeper

1.基于Redis实现分布式锁&#xfeff; Redis分布式锁原理如上图所示&#xff0c;当有多个Set命令发送到Redis时&#xff0c;Redis会串行处理&#xff0c;最终只有一个Set命令执行成功&#xff0c;从而只有一个线程加锁成功 2.SetNx命令加锁 利用Redis的setNx命令在Redis数据库…

01 openEuler操作系统介绍

文章目录 01 openEuler操作系统介绍1.1 发布件1.2 最小硬件要求1.3 硬件兼容性1.4 关键特性1.4.1 openEuler 22.03-LTS基于 Linux Kernel 5.10 内核构建, 在进程调度、内存管理等方面带来10余处创新1.4.2 新介质文件系统1.4.3 内存分级扩展1.4.4 用户态协议栈1.4.5 云原生调度增…

【人工智能】深度优先搜索、代价一致搜索、深度有限搜索、迭代深度优先搜索、图搜索

【人工智能】无信息搜索—BFS 、代价一致、DFS、深度受限、迭代深入深度优先、图搜索 什么是搜索 搜索问题是指既不能通过数学建模解决,又没有其他算法可以套用或者非遍历所有情况才能得出正确结果。这时就需要采用搜索算法来解决问题。搜索就是一种通过穷举所有解的状态,来…