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

组件化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.lryc.cn/news/216313.html

相关文章:

  • Windows 内置Linux子系统的配置(From WSL1 to WSL2)
  • 2023-11-03 android app TextView 滚动,ScrollView 之外的另外一种方法
  • SAP 获取GOS附件清单及URL数据方法
  • VUE批量下载图片打包成zip下载
  • 微信小程序-form表单-获取用户输入文本框的值
  • Docker(1)
  • axios 实现请求重试
  • SSE加速随笔
  • 【TES720D】青翼科技基于复旦微的FMQL20S400全国产化ARM核心模
  • arcgis删除细长图斑的方法
  • Flutter笔记:Flutter的WidgetsBinding.instance的window属性
  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天
  • 【自用】vmware workstation建立主机window与虚拟机ubuntu之间的共享文件夹
  • 【2023年MathorCup高校数学建模挑战赛-大数据竞赛】赛道A:基于计算机视觉的坑洼道路检测和识别 python 代码解析
  • Mozilla Firefox 119 现已可供下载
  • What is 哈希?
  • 在Photoshop中如何校正倾斜的图片
  • Maven第六章:Maven的自定义插件开发
  • springboot 注入配置文件中的集合 List
  • springboot整合redis+lua实现getdel操作保证原子性
  • win10系统nodejs的安装npm教程
  • C语言assert函数:什么是“assert”函数
  • R语言绘图-5-条形图(修改坐标轴以及图例等)
  • uniapp自定义权限菜单,动态tabbar
  • ubuntu20.04配置解压版mysql5.7
  • 【js】vue获取document.getElementById(a)为null
  • 系列六、Mybatis的一级缓存
  • 用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例
  • geoserver 的跨域问题怎么解决
  • SQL语法实践(一)