组件化npm包打包和使用

背景:本地环境对功能组件提取,开发环境下通过本地路径引用,发布模式下走npm包引用

1、项目下新建packages/HelloWorld文件夹,在此文件夹下运行终端

npm init

 

 新建packages/HelloWorld/index.vue文件

新建packages/HelloWorld/index.js文件

import helloworld from "./index.vue";export {helloworld
}

1、本地打包:

npm pack 

 

将helloworld-1.0.1.tgz 放到项目根目录下,运行终端命令

npm install helloworld-1.0.1.tgz   //加载组件

npm uninstall helloworld-1.0.1.tgz   //删除组件

 

在项目.vue文件中引用

<script setup>
import {helloworld} from "helloworld"
</script><template><div><span>测试helloworld组件</span><helloworld></helloworld></div>
</template>

2、私库打包

npm config get registry  //查看 npm 配置私库地址

npm config set registry ${私库地址:https://registry.npmjs.org/}  //设置私库地址

npm adduser --registry  ${私库地址:https://registry.npmjs.org/}   //添加用户

npm login      //登录私库账号

npm publish  //将npm包推送到私库

npm unpublish ${包名} --force   //删除已发布的包

npm install ${包名}  //下载对应包

 3、本地路径访问

安装@types/node,配置@=src目录路径

npm install @types/node --save-dev 

在vite.config.ts文件添加配置

"hello-world": resolve(__dirname, "packages/HelloWorld") 

 在项目.vue文件中引用

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

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

相关文章

时间同步

本机192.168.3.6 sudo service ntp restart sudo /etc/init.d/ntp stop sudo ntpdate 192.168.3.7

uniapp黑马优购

配置tabbar 使用 npm install escook/request-miniprogram 进行http请求 挂载到 uni.$http 上 uniapp小程序分包 访问的时候 携带分包目录 /subpkg/goods_detail/goods_detail git分支使用 # 创建并使用分支 git checkout -b home git commit # 推送到远程的home分支…

自己动手实现一个深度学习算法——三、神经网络的学习

文章目录 1.从数据中学习1&#xff09;数据驱动2&#xff09;训练数据和测试数据 2.损失函数1)均方误差2)交叉熵误差3)mini-batch学习 3.数值微分1&#xff09;概念2&#xff09;数值微分实现 4.梯度1&#xff09;实现2&#xff09;梯度法3&#xff09;梯度法实现4&#xff09;…

cpu算力DMIPS说明

DMIPS即以dhrystone程式为测量方式标准的mips值&#xff0c;DMIPS即million instruction per second&#xff0c;每秒百万个指令&#xff0c;即处理器每秒能运行多少百万个指令。 D是Dhrystone的缩写&#xff0c;表示的是基于Dhrystone这样一种测试方法下的 MIPSQ。Dhrystone是…

c++一些知识点

1.在release版本中用assert断言 在#include "assert.h"前面加上#undef NDEBUG #undef NDEBUG #include "assert.h"2.[待解决] 同一份代码 在DEBUG版本出现error LNK2005: 已经在 .obj 中定义 在release版本中就正常

二叉树(9.7)

目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示 2.二叉树概念及结构 2.1概念 2.2 特殊的二叉树 2.4 二叉树的存储结构 3.二叉树顺序结构及实现 3.1 二叉树的顺序结构 3.2 堆的概念及结构 1.树概念及结构 1.1树的概念 前面我们学习的都是组成简…

element-ui input 输入框赋值后,无法再输入的问题解决

问题 dialog弹出框里的form表单&#xff0c;打开后给输入选项赋值&#xff0c;改选项无法再输入。问题代码&#xff1a; <el-form :model"form" ref"formRef" label-width"120px" size"small"><el-form-item label"业务…

记一次有趣的免杀探索

文章目录 前记查杀排查源码修改免杀效果测试 前记 evilhiding昨天被提issue不能绕过火绒了&#xff0c;于是今天更新了evilhiding v1.1&#xff0c;已经可以继续免杀了。 期待各位的stars&#xff0c;项目地址如下&#xff1a; https://github.com/coleak2021/evilhiding查杀…

在Win10系统进行MySQL的安装、连接、卸载

在Win10系统进行MySQL的安装、连接、卸载 MySQL的安装 本教程在Win10系统下安装部署MySQL-8.0.32版。 MySQL安装参考地址 MySQL安装包地址 提取码: rnbc。 选择下载mysql-installer-community-8.0.32.0安装包。 连接数据库 方式一&#xff1a; 安装后&#xff0c;可以在开始…

Ruby 之方法委托

ruby 方法委托的优点在于&#xff0c;可以将多个不同实例&#xff08;或类&#xff09;的方法组织在一起&#xff0c;然后进行统一调用&#xff0c;方便各类方法的统一管理。比如下边示例中的 color 和 username&#xff0c;本来是不同类里边的方法&#xff0c;但最后都可以统一…

非洲“支付宝”PalmPay搭载OceanBase:成本降低80%

10 月 30 日&#xff0c;非洲支付公司PalmPay 的核心系统搭载国产自研数据库OceanBase&#xff0c;正式投入使用。PalmPay 也是 OceanBase 首个非洲商业用户。 作为一家非洲领先的金融科技公司&#xff0c;PalmPay 于 2019 年在尼日利亚推出电子钱包应用&#xff0c;其功能类似…

中兴再推爆款,双2.5G网口的巡天AX3000Pro+仅需299元

10月30日消息,中兴新款路由器中兴巡天AX3000Pro将于10月31日20:00正式开售,当前可在天猫、京东及红魔商城进行预约,首发价格299元。 据了解,中兴巡天AX3000Pro是中兴智慧家庭推出的巡天系列新品,也是当前市场上唯一一款300元价位内配备双2.5G网口的路由器。 中兴巡天AX3000Pro…

SpringBoot绑定配置文件中变量的四种方式-解析

当在Spring Boot中需要绑定配置文件中的变量时&#xff0c;可以使用以下注解&#xff1a; PropertySource&#xff1a;用于指定要加载的属性文件。可以将该注解放置在Configuration类上。 Configuration PropertySource("classpath:application.properties") public…

在云栖,一场关于数据洞察的创新实践

云布道师 数据驱动创新创新鉴于未来。做好数据洞察&#xff0c;是鉴往知来的必备条件。阿里云将携手广大开发者&#xff0c;进一步完善相关技术和工具&#xff0c;提供更好的产品和方案&#xff0c;让数据洞察的应用更加广泛和深入。 2023 年 11 月 2 日&#xff0c;是为期三…

Git 删除本地和远程分支

目录 删除本地和远程分支分支删除验证验证本地分支验证远程分支 开源项目微服务商城项目前后端分离项目 删除本地和远程分支 删除 youlai-mall 的 dev 本地和远程分支 # 删除本地 dev 分支&#xff08;注&#xff1a;一定要切换到dev之外的分支才能删除&#xff0c;否则报错&…

数据库连接池大小的调整原则

配置连接池是开发人员经常犯的错误。配置池时需要理解几个原则&#xff08;对于某些人来说可能违反直觉&#xff09;。 想象一下&#xff0c;您有一个网站&#xff0c;虽然可能不是 Facebook 规模的&#xff0c;但仍然经常有 10,000 个用户同时发出数据库请求&#xff0c;每秒…

力扣第1049题 最后一块石头的重量Il c++ 动态规划(01背包)

题目 1049. 最后一块石头的重量 II 中等 相关标签 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x <…

网络工程师应知应会:基础知识(5)

一、防火墙区域结构 防火墙按安全级别不同&#xff0c;可划分为内网、外网和 DMZ 区。 (1) 内网。 内网是防火墙的重点保护区域&#xff0c;包含单位网络内部的所有网络设备和主机。该区域是可信的&#xff0c;内网发出的连接较少进行过滤和审计。 (2) 外网。 外网是防火墙重…

面试算法51:节点值之和最大的路径

题目 在二叉树中将路径定义为顺着节点之间的连接从任意一个节点开始到达任意一个节点所经过的所有节点。路径中至少包含一个节点&#xff0c;不一定经过二叉树的根节点&#xff0c;也不一定经过叶节点。给定非空的一棵二叉树&#xff0c;请求出二叉树所有路径上节点值之和的最…

9.Vue前端使用iframe集成帆软报表的单点登录

一、背景 需要把帆软报表内嵌到若依里面来。 二、帆软设置 2.1 帆软报表的url 打开帆软后端里面的【目录管理】查看具体报表的url 帆软报表的具体地址为: Frm聚合报表地址: 【帆软的服务http】+【/webroot/decision/view/form?viewlet=demo/demo.frm】 CPT普通报表的地…