NPM 发布Vue组件/插件流程

最新推荐文章于 2024-03-09 18:01:31 发布
原创 最新推荐文章于 2024-03-09 18:01:31 发布 · 700 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm

本文详细介绍了如何发布npm包，包括在npm官网注册账号、使用npmlogin本地登录、通过npmpublish发布组件包，并提供了发布过程中遇到问题的解决办法。遵循教程，你将能够成功发布并下载使用自己的Vue组件npm包。

1：首先进入npm官网申请账号（需要邮箱验证通过后才可发布npm包）,这里我一开始使用QQ邮箱，发现一直推不上去，建议一开始就使用gmail = =npmhttps://www.npmjs.com/

2：在本地命令行通过 npm login 进行本地登录

3：在自己需要对外发布的文件夹内通过命令 npm publish 进行发布

4：在官网上能看到我们的组件包已经发布了

5：下载使用（这里用的是yarn）

 

 

附：组件插件的代码及npm包

 cwhbutton - npm

注意点：

ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/itheima-toolscxs - Forbidhttps://blog.youkuaiyun.com/weixin_43423781/article/details/117982943?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link

如何制作并发布一个vue的组件的npm包 https://blog.youkuaiyun.com/hamupp/article/details/79337643icon-default.png?t=LA92https://blog.youkuaiyun.com/hamupp/article/details/79337643

Node JS 模块：NPM 发布 |发布 NPM 包
新华编程特战队
02-29 3266
NPM 或 Node Package Manager 是世界上最大的软件存储库，它使开发人员能够发布他们的包并使用其他人发布的包。包允许您向应用程序添加一些常用功能。如果您正在考虑向 Node 应用程序添加任何通用功能，那么很可能已经存在用于它的 NPM 包。在本文中，我们将了解 NPM 是什么，创建一个包并使用 npm publish 命令发布 NPM 包。一个包可能包含一个或多个模块，它可以帮助我们向 Node 项目添加一些功能。包管理器用于管理所有项目依赖项。
vue2封装自定义插件并上传npm发布及使用
最新发布
Dalin0929的博客
11-25 749
vue2封装自定义插件并上传npm发布及使用
[转]使用npm发布vue组件
Admans的专栏
01-18 440
???? NPM 是随同 NodeJS 一起安装的 javascript 包管理工具，能解决 NodeJS 代码部署上的很多问题 发布前的准备 注册一个 npm 账号 前往 NPM 官网进行注册 初始化项目 这里用的是webpack-simple,可以理解为精简版的vue-cli。 如果没有全局安装 vue 的话，需要先安装 cnpm i -g @vue/cli-init 然后再初始化 vue 项目，我们要写的是一个简单的 vue 组件，不需要依赖那么多
npm 发布
p312011150的博客
03-14 419
终端进入到项目文件夹，执行npm init命令，构建模块的描述文件，系统会提示你输入所需的信息，不想输入就直接Enter跳过。这里主要的几个配置如下name就是你要发布的module名；version版本信息（每发布一次版本号都必须大于上一次发布的版本号）；entry入口文件。剩下的就是开发啦$ npm init This utility will walk you through creati...
Npm发布
cai454692590的博客
12-31 243
1. NPM官网注册账号 官网地址 2. 发布前准备 在项目根目录创建一个.npmignore文件,可以忽略一些无用的文件 如: .* /node_modules /src vue.config.js 3. 修改package.json中的项目名称和版本号 { "name":"test-jjj", "description": "test", "version": "1.0" "author" : "jtzmdbc" ... } 4. 发布 # 登录 -> npm login ->
基于Vue的文字跑马灯组件(npm 组件包)
08-30
2. 发布流程：登录npm后，在本地完成组件的编写，然后在命令行中执行`npm publish`。发布过程中可能会遇到网络问题，特别是国内用户，可能需要切换npm的registry到国内的镜像（如淘宝npm）。确保设置回原registry（`...
自定义Vue组件打包、发布到npm及使用教程
10-16
在将自定义Vue组件发布到npm之前，需要在项目中创建一个入口配置文件，这个文件会指定哪些组件被包含在发布的npm包中。然后，需要对webpack.config.js进行配置，设置正确的入口(entry)和出口(output)路径。示例如下...
如何把本地的vue项目写的组件上传到npm
weixin_44875212的博客
03-09 1974
平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了。
精选资源
jiaminghi/data-view dataV for vite vue2 补丁 for npm/yarn
04-13
2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用的，就是底层node_modules位置不一样而已，不过修改原理都是一样的，大家可以自行下载研究，支持...
手把手教你npm发布一个vue插件
gongliming_qd的博客
02-15 1759
效果 1. 安装vue脚手架 选择最基础的即可 vue create 项目名字 2. 整理文件 删除src文件， 新增packages文件，同时建议把eslint关闭 完整结构如下 ├── packages │ ├── index.js # 入口文件 │ ├── components # 组件 │ │ ├── index.vue # 本文需要封装的组件 ├── README.md ├── package-lock.json ├── package.json └──vue.config.js #
npm库发布
waillyer的博客
03-23 1775
npm config set registry https://registry.npmjs.org 创建项目 修改打包配置 tsconfig.build.json { "compilerOptions": { "outDir": "dist", // 生成目录 "module": "esnext", // 格式 "target": "es5", // 版本 "declaration": true, // 为每一个 ts 文件生成 .d
vue组件发布npm
热门推荐
欢迎来到☆槿畔☆的博客
09-07 2万+
最近对开发Vue组件库的流程很好奇，网上步骤一搜也是一堆，总是少点漏点的步骤，就会导致整段垮掉，下边自己弄完整理了一下。 跟着步骤走： 一，创建一个vue项目，为了简洁方便，推荐使用webpack-simple构建一个项目 vue init webpack-simple my-project 二，就是按照提示，cd my-project------->npm i---------...
手摸手教你如何使用npm发布vue插件
少油少盐不要辣
03-13 991
最近心血来潮写了个vue图片预览插件image-preview-vue-else（欢迎大家下载使用，并提供建议，后面我会持续迭代。笔芯~），研究如何用npm将它发布出去。下面是我发布成功的截图： 下面介绍的就是我在整个过程中，遇到的问题及其解决方案和心得。具体封装vue插件的过程，我就不写了，想必大家都了解的。 1.如何打包插件 有两种方式： 使用webpack打包。这就需要你手动配置大部分功能了，本人不太了解，有兴趣的可以自己尝试下。 使用vue-cli打包。这在vue官网中有比较详细的介绍，好处就是v
自己开发或者修改的组件包如何发布到npm官方市场
qq_34701838的博客
06-09 2185
注册需要用户名，密码和邮箱， 当注册完成后需打开邮箱进行验证（邮箱不验证无法上传）package name 就是安装命令的包名，这个不能跟市场上的重名。打开npm官方网站： www.npmjs.com;点击用户→选择package选项，出现安装包名称发布成功！在需要打包发布的文件夹package.json所在目录下。查看有没有登录过，如下错误就是要登录了。查看登录成功没有，返回用户名代表成功。最后在项目中使用安装命令即可使用了。按照提示修改后一路回车就行；
npm包发布
Leon的博客
12-17 614
npm包发布 npm注册 1.注册(输入用户名，密码，邮箱。注册成功会自动登录) npm adduser 2.登录(输入用户名，密码就可登陆成功) npm login 3.发布(注意发布必须是登录状态下) npm publish mljr-cli npm install mljr-cli -g ➜ ~ mljr -h Usage: mljr <command> [opt...
Vue2开发插件并发布到npm
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
02-22 2613
Vue2开发vue-amazing-selector下拉框组件，并发布到npm
发布npm包
李小乐er
06-12 512
1.npm init -y 或者npm init (之所以-y 是不需要一步一步手动输入 直接自动生成内容) 2.注册npm账户 https://www.npmjs.com/signup 3. npm login 登录(输入对应用户名、密码、email) 4.镜像问题（如果出现如下红框区域的内容，证明现在镜像用的不对，可以通过npm config get registry 命令去...
npm 发布包
cyadyx的博客
01-11 438
npm 发布包前言一、创建项目二、配置项目1.创建.npmignore2.配置package.json3. 发布打包三、发布打包问题1. npm publish报错ERR E4002. npm login 报错code E409四、测试 文章目录前言一、创建项目二、配置项目1.创建.npmignore2.配置package.json3. 发布打包三、发布打包问题1. npm publish报错ERR E4002. npm login 报错code E409四、测试 前言 该包主要初步体验npm 打包 发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值