vue组件库发布到npm

于 2022-11-27 21:44:40 发布
阅读量540 收藏
点赞数
分类专栏： 前端工程化 文章标签： npm vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlijun_0808/article/details/128070064
版权

修改项目的信息

在package.json文件中：
在这里插入图片描述

修改Readme文件的信息

在这里插入图片描述

注册npm 账号

指路官网

vscode终端登录npm

执行 npm login
输入用户名，密码，邮箱，邮箱验证码
如下图
在这里插入图片描述

执行 npm publish
如下图在这里插入图片描述

出现的问题

npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT
https://registry.npmjs.org/j-vue3-ui - You cannot publish over the
previously published versions: 0.1.0. npm ERR! 403 In most cases, you
or one of your dependencies are requesting npm ERR! 403 a package
version that is forbidden by your security policy, or npm ERR! 403 on
a server you do not have access to.

解决办法:
修改项目的名称，出现的原因可能有两个，一个是之前上传过相同名称的组件库，另一个是在npm库中有相同的名称。
可以去npm上搜一下，有没有相同名字的库名称冲突。

__十七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
发布一个简单的npm包简单流程（图文并茂，你必懂）
m0_68997646的博客
12-16 2127
发布一个简单的npm包简单流程（图文并茂，你必懂）
npm publish —— 发布npm包
weixin_40664145的博客
12-02 1098
目录 一、在npm官网注册账户 二、在填写的邮箱中验证邮箱 三、在命令行中登录 四、使用npm源 五、进入需要发布的目录发布项目 六、修改更新版本 记录一次发布npm包的过程以做参考 一、在npm官网注册账户 进入进行注册，如果已经注册进入跳到第三步 二、在填写的邮箱中验证邮箱 如果注册之后没有验证邮箱，那么发布的时候会报错 三、在命令行中登录 npm login # Username: authorname # Password: # Email: (this IS public) email@em
在npm上发布自己的包（保姆级别）
priessless的博客
10-01 422
在VScode 或者系统终端中使用命令对npm包进行发布
NPM =＞ npm登录-发包-删包-整体流程
Write less，do more
09-07 1517
本文章向大家介绍npm发包流程，主要包括npm发包流程使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。 1、注册npm账号 https://www.npmjs.com/signup 2、激活npm账号 注意是有两个邮件哈 3、git托管 4、发包 登录 npm adduser //创建账户 npm login //登录 npm whoami //查看已经登录的账号 //前提已完成npm用户的注册 $ npm adduser Username: you.
npm发布包
qq_65690862的博客
09-16 184
登录npm发布包 1.终端 输入npm login 可以登录npm账号，依次输入用户名，密码（密码盲打），邮箱 2.输入nrm use npm通过命令更改npm服务（需将npm切换为npm官方服务，不能使用taobao镜像） 注：可以通过npm config get registry来获取当前下载包镜像源 3.输入npm publish 发布包（发布前需检查npm官网是否有相同的包名，将目录切换到根目录） npm删除发布的包 1.输入npm unpublish 包名 --force 进行
关于npm登录出现403问题报错解决
热门推荐
qq_35664065的博客
02-17 1万+
npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.couchdb.user:junhui123! - [FORBIDDEN] Public registration is not allowed npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a
npm包发布及npm link调试
祥哥的说
10-26 1720
一、npm包开发及发布 1、新建文件夹helloDemo，在该文件路径下npm init，一路回车即可，具体的包名等信息，可以在生成的package.json中进行修改。 2、目录结构如下： index.js：入口 package.json，package-lock.json：包信息 readme.md文档 test-formatter.js：测试文件 （1）index.js文件： let formatter = { helloName (name) { return `h
Vue组件库发布到npm详解
08-28
Vue 组件库发布到 npm 是指将 Vue 组件库发布到 npm（Node Package Manager）平台上，以便其他开发者可以轻松地安装和使用该组件库。本文将详细介绍如何将 Vue 组件库发布到 npm，包括项目结构、项目配置、开发与...
Vue cli3 库模式搭建组件库并发布到 npm的流程
10-17
基于 Vue 的颜色选择器
Vue 组件封装 并使用 NPM 发布的教程
01-19
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入，就像这样： ps: 这里注意一下包的名字前缀是 unisoft ，组件的名字前缀是 ...
快速开发一个vue插件库并发布到npm
08-12
"快速开发一个vue插件库并发布到npm"这个主题涵盖了Vue组件库的创建过程，以及如何将它部署到npm仓库。以下是关于这个主题的详细讲解。 1. **Vue组件库的基础知识** - Vue组件是Vue.js的核心特性，允许开发者将UI...
用vue封装插件并发布到npm的方法步骤
08-29
使用 Vue 封装插件并发布到 npm 需要经过多个步骤，包括初始化组件、实现功能、添加 index.js、修改配置文件等。下面将详细介绍每个步骤的实现过程。 一、初始化组件 使用 Vue-cli 初始化组件，生成基本的项目结构...
vue2.0+ 从插件开发到npm发布的示例代码
08-27
Vue 2.0+ 插件开发到npm发布的流程涵盖了从创建项目、编写插件代码、测试、打包到发布到npm仓库的整个过程。这里我们将详细介绍每个步骤。 1. **初始化项目** 使用`vue init webpack-simple vue-pay-keyboard`命令...
从零开始在NPM上发布一个Vue组件的方法步骤
10-17
在本教程中，我们将深入探讨如何从零开始在NPM上发布一个Vue组件。这个过程主要包括四个...通过学习这个过程，你不仅可以创建自己的Vue组件库，还能理解开源软件发布的流程，这对于任何前端开发者来说都是宝贵的经验。
vue组件从开发到发布的实现步骤
10-17
总结来说，Vue组件从开发到发布的流程包括：组件设计与实现、项目结构规划、Webpack配置、打包、npm发布以及在GitHub上创建项目主页。这个过程中，良好的代码组织和文档编写习惯至关重要，它们有助于提升组件的可...
使用npm发布自己包（详细教程）
mayanlong
12-03 2322
本文章是关于npm发布包的详细教程以及过程中遇到的问题和解决方式
手把手教你发布一个npm包（基于vue）
white-hang的博客
12-07 2599
本文，主要介绍了如何基于vue发布一个属于自己的npm包，文章手把手教你实现发布npm包，按步骤操作即可。
执行命令npm publish报错：403 Forbidden - PUT https://registry.npmjs.org/kunmomotest2 - You cannot publish o...
weixin_30794851的博客
07-15 2401
前言 执行命令npm publish报错：403 Forbidden - PUT https://registry.npmjs.org/kunmomotest2 - You cannot publish over the previously published versions: 0.0.1. 原因 不能在以前发布的版本上发布:0.0.1，所以我们需要升版本，更改包的pack...
npm发布包（基于vue）
qq_45650200的博客
04-12 970
1、去官网npm注册一个账号（用户名最好是英文） 2、打开项目终端，执行npm login登录 3、执行npm publish。到这就完成了 （出错了可以先去npm网站搜你的包名，看是不是已经有人用了，包名是不能跟别人一样的，包名是packge.json里面的name） （登录的时候会往邮箱发送类似验证码的东西，加粗的数字就是验证码，npm发布包是免费的） ...
vue2项目打包成库，发布到npm上
最新发布
05-18
要将 Vue2 项目打包成库并发布到 npm 上，可以按照以下步骤进行操作： 1. 在项目根目录下创建一个名为 `package.json` 的文件，用于描述你的库信息和依赖项。可以使用 `npm init` 命令自动生成模板。 2. 安装必要的依赖项，例如 `vue`、`rollup`、`rollup-plugin-babel` 等。其中 `rollup` 是一个 JavaScript 模块打包器，用于将 Vue2 项目打包成一个库；`rollup-plugin-babel` 则是用来将 ES6+ 语法转换成 ES5 语法。 ```bash npm install vue rollup rollup-plugin-babel --save-dev ``` 3. 在项目根目录下创建一个名为 `src` 的文件夹，用于存放你的源代码。可以在该目录下创建一个 `index.js` 文件，用于导出你的 Vue2 组件或插件。 4. 在项目根目录下创建一个名为 `rollup.config.js` 的文件，用于配置打包参数。具体配置可以参考下面的示例： ```javascript import babel from 'rollup-plugin-babel'; import commonjs from 'rollup-plugin-commonjs'; import resolve from 'rollup-plugin-node-resolve'; import vue from 'rollup-plugin-vue'; export default { input: 'src/index.js', output: { name: 'MyLibrary', file: 'dist/my-library.js', format: 'umd', globals: { vue: 'Vue' } }, plugins: [ vue(), resolve(), commonjs(), babel({ exclude: 'node_modules/**' }) ], external: ['vue'] }; ``` 5. 在 `package.json` 文件中添加 `scripts` 字段，用于定义打包命令和发布命令。例如： ```json "scripts": { "build": "rollup -c", "prepublishOnly": "npm run build" } ``` 上面的配置表示，运行 `npm run build` 命令会执行 `rollup -c` 命令进行打包；运行 `npm publish` 命令时会先执行 `npm run build` 命令，然后再执行发布操作。 6. 执行 `npm login` 命令登录 npm 账号，如果没有账号可以先注册一个。 7. 执行 `npm publish` 命令将库发布到 npm 上。如果发布成功，其他人就可以通过 `npm install` 命令安装你的库并使用了。 以上就是将 Vue2 项目打包成库并发布到 npm 上的基本步骤，具体细节可以根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值