Vue2 创建组件库——（四）发布组件库到npm

原创 已于 2023-03-15 17:37:01 修改 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm #前端 #vue.js

于 2023-02-18 16:04:14 首次发布
文章讲述了如何修改package.json文件，包括移除私有标识，添加描述和入口文件，设置关键字和指定发布文件。接着，它指导读者创建README.md，注册并登录npm，解决403错误，以及执行npmpublish来发布项目。最后，提到了在新vue项目中测试发布的组件库和建立文档站点的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. package.json文件中
  • 删除 "private": true,，
  • 可添加描述信息description，
  • main属性指定组件库的入口文件
  • keywords 关键字，便于用户找到该组件库
  • files 指定想要发布的文件目录
    请添加图片描述
  1. 编写 READEME.md文件
    在这里插入图片描述
  2. 注册npm账号
  3. 随后执行npm login 依次输入npm用户名、密码、邮箱，
    (若出现403错误，可执行 npm config set registry https://registry.npmjs.org/ 将镜像切回，此时再执行 npm login )
  4. 执行成功后，再执行 npm publish 发布项目。
  5. 可进入npm网站查看发布的项目
  6. 新建一个vue项目，测试发布后的组件库(按照README.md文件写的步骤下载组件库并引入执行，看是否成功)
  7. 搭建组件库文档站点
vue2 编写自己的组件库，并发布到npm
qq_42859450的博客
06-22 2149
vue2编写自己的组件库，并发布到npm
Vue2 创建组件库——（五）搭建组件库文档站点
qq_52111135的博客
02-18 763
Vue2 创建组件库——（五）搭建组件库文档站点
Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细
wocwin的博客
03-24 5802
Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细
Vue-组件2 创建私有组件
SevenSongyun的博客
12-21 165
Vue-57 创建私有组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> </head> <body> <div i...
Vue 2 组件打包并发布到 npm
BI
03-08 2250
打包 Vue 2 组件，并发布到 npm 的最佳实践
记录：封装Vue组件并发布到npm.js
jua18530044212__的博客
04-06 203
7、在src/test-ui目录里 执行 npm publish 推送，如果没有配置过用户会提示你进行用户密码等校验；5、进入test-ui文件夹，执行 npm init -y 生成局部的package.json，自己定义组件库名称 name，版本号 version（每次修改需更新版本号）4、执行命令 npm run buildnpm, 会生成test-ui的文件夹，里面有打包好的各种文件。3、打包npm包配置,在package.json中配置打包脚本。6、修改源，如果之前有修改过npm的源需要改回来。
基于vue的ui组件库开发—— 01
最新发布
2401_86337335的博客
09-29 1184
前言随着重复项目的增多，通用组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。
从零开始搭建自己的vue组件库——02测试发布
u014050961的博客
10-30 897
从零开始搭建自己的vue组件库——02测试发布引言历史导航本地测试本地打包发布官网查看代码库 引言 上一篇文章介绍了打造vue组件库的第一步创建项目，本章将继续介绍本地测试，以及发布到npm 历史导航 前一篇：从零开始搭建自己的vue组件库——01创建 本地测试 首先本地测试需要在examples里编写代码，可以按照正常的vue项目去写，唯一区别就是原来的src目录变成了examples目录，其他一切正常，在examples的main.js里引入packages的button，为了方便测试，直接添加成全局
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
Mint UI 基于 Vue.js 移动端组件库
10-19
Mint UI是一个基于Vue.js的移动端组件库，它为开发者提供了一套丰富的CSS和JavaScript组件，以应对移动设备上的界面开发需求。Mint UI具有轻量级和按需加载的特点，能够帮助开发者快速搭建风格统一、性能优化的移动...
从零开始撸一个Vue2.0组件库-并上传到NPM上
weixin_42950333的博客
09-22 1236
创建Vue2.0项目 我们使用Vue-CLI来创建一个新的Vue项目，并起名为yunpeng-ui。 vue create yunpeng-ui 最后这是我的所有选择配置 编写组件 可以看到项目的src/components文件夹下面已经有一个HelloWorld组件，让我们修改一下目录结构。把HelloWorld组件移入新创建的li-hello-world文件夹中并改名为index.vue。 然后再写一个组件，新创建文件夹zyp-button，创建index.vue，简单写个按钮组件。 <tem
vue封装自定义组件，打包发布到npm上使用
renhe96421的博客
06-09 2698
vue封装自定义组件，打包发布到npm上使用; 1.在项目的src目录下新建一个目录（components）用来存放所有自定义组件源码 2.组件封装好后在sr下新建一个index.js文件，为组件库的入口文件 ...... 7.发布npm...
基于vue2.x搭建组件库的流程-（三）-组件库文档的搭建
weixin_42349568的博客
10-09 1329
当我们的组件库具备一些组件之后，需要开发者能够更流畅地使用，就需要有使用文档。这里我是用vuepress来搭建对应的开发文档。本文地内容也是和这个差不多，只不过整合了vue的组件使用范例。
【Vue2】组件
weixin_45707229的博客
09-03 1077
Vue2中的组件化开发，以及最重要的父子组件间通信，通过props可以实现父传子；通过ref或自定义事件可实现子传父。
在npm上发布基于Vue2.x开发的UI组件库（记录篇）
仗剑行于江湖，执笔记江湖事。
02-27 278
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎关注笔者的个人网站：https://www.qiucode.cn &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基于Vue开发的UI组件库肯定是要公用的，虽然可以在每创建一个Vue项目时可以复制这些组件，如果组件比较大的情况下呢？是不是很不方便呢？ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;解决
vue2封装组件，上传至NPM
七号程序员的博客
09-04 1647
完成组件封装并上传至NPM
npm市场发布包步骤（npm发布vue组件）
weixin_52941842的博客
03-07 763
输入登录指令之后会出现一些的提示，需要输入npm的用户名，密码（输入密码的时候终端输入行是不会显示的），邮箱，邮箱收到的验证码。如果有报错，根据报错提示去百度一下，如我这里一开始发布报错是因为项目有个属性是私有的，所以没能发布成功，改成false即可。发布的时候需要注意的是，插件必须要有package.json文件，没有就执行npm init命令初始化。6.如果没有报错或者显示了自己的账号证明就是登录成功了，也可以通过指令查看当前登录的账号。如果出现淘宝的镜像源则需要切换成官方的镜像源。
如何搭建私有NPM仓库，私有NPM仓库搭建教程
lwplvx的专栏
04-01 7811
1 前言 npm 是日常前端开发过程中离不开的包管理工具，可以帮助我们快速安装 npm 仓库中优秀的第三方代码包，它的出现极大地促进了 Node 及前端生态的发展繁荣。 那么问题来了，为什么要搭建私有 npm 仓库呢？ 在日常工作中，大多数时候我们会使用 NPM 共有仓库中的优秀开源代码包，但还是会有一些不能够开源的代码封装和工具，或者对第三方的开源代码做定制化修改和扩展，这些代码包需要在组织内部进行管理和共享，不能够上传到 NPM 共有仓库中。因此我们需要搭建 NPM 私有仓库来满...
Vue转React组件工具——vue2react使用教程
资源摘要信息:"vue2react是一个实用的工具，旨在将Vue组件转换为React组件。它支持单文件组件（Single File Components，简称SFC）格式，文件扩展名为.vue的组件转换。通过这个工具，开发者可以将Vue项目中的组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值