vue自定义组件，上传私服通过npm安装

最新推荐文章于 2023-03-13 15:30:20 发布
原创 最新推荐文章于 2023-03-13 15:30:20 发布 · 1.6k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js

本文介绍了如何将Vue自定义组件发布到公司内部的npm私服，并详细阐述了发布过程，包括更改npm注册源、登录、上传组件。同时，文章也详细讲解了从私服安装组件的步骤，确保在新项目中能正确引用这些组件。

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

前言：之前公司要求，许多公共组建不重复开发，通过npm即可安装组建。

第一步：登陆自己公司的私服地址

1.先将npm映射的地址指向公司的私服地址
切换镜像 npm config set registry http://XXX:XX/repository/npm-group/
查看镜像npm config get registry

2.登陆
npm login registry= http://XXX:XX/repository/npm-hosted/
账户名
密码

3.上传组件npm publish --registry http://XXX:XX/repository/npm-hosted/

第二步：自定义组件

1.编写组件
（1）创建一个文件
在这里插入图片描述

在这里插入图片描述

将组建暴露出来
在这里插入图片描述

编写组建说明 注意版本号 小版本迭代修改第二个数字，大迭代修改第一个
在这里插入图片描述

创建页面给组件创建name ，

最低0.47元/天 解锁文章

200万优质内容无限畅学
woderlili
关注
上传vue组件到npm npm私服
TVM的博客
05-19 1047
发布vue组件到npm库
还不知道npm私服？一篇教会你搭建私服并发布vue3组件库到nexus
Jianmu_Dev的博客
06-14 1468
这篇`还不知道npm私服？一篇教会你搭建私服并发布vue3组件库到nexus`，有别于上一篇，此篇博客介绍了如何将vue3组件库发布到私服，而不是发布到npm官方仓库。
Vue自定义组件npm上传私服，且从私服下载使用
柒涩波
05-12 2120
Vue自定义组件npm上传私服，yarn私服下载使用安装镜像源管理工具nrm发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以==以下步骤都是基于**npm**命令==)如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 安装镜像源管理工具nrm
vue的npm私服
ityw520的博客
09-15 375
vue的npm私服
vue 自定义组件 的封装 上传 使用
weixin_43873495的博客
04-26 709
1、创建一个文件夹xxplugin，并初始化项目 npm init -y 2、定义一个单文件组件 实现某些功能例如：Loading.vue <template> <div> </div> </template> .... 3、在xxplugin根目录创建有一个index.js文件，在这个文件中使用install方法来全局注册该组件，并将其暴露...
vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。
三拾的博客
03-13 4754
当我们项目中用到的表格太多的话，就会导致我们的代码量一直增加，所以我们要封装一个公共得组件，通过传参引入来使用，下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。
VUE基于NPM的自定义组件发布和下载
莫等闲的专栏
08-27 449
最近搭建了一个NPM私服，就尝试着发布一个VUE自定义组件到私服， 流程如下： （1）新建VUE工程 vue init webpack vuepub cd vuepub npm install npm run dev （2）看到如下界面，说明工程搭建成功 （3）在components目录下建立test文件夹，在其下建立test.vue，代码如下： <template> <div class="app"> <h1>{{ info }}&l...
hwq-custom-ui-package:自定义ui上传至npm（使用vue，element等）
05-09
如何在本地测试自定义ui组件是否可用 第一步：执行打包命令 npm run build:lib 第二步：从项目跟目录下面执行 npm link （执行npm link命令会在全局npm node_modules文件夹(与安装我们的全局npm依赖node_modules...
vue开发环境准备-  配置npm私服地址
chuizongduo7390的博客
12-19 1931
1)通过config命令 npm config set registry https://ip/repository/npm-group 2)命令行方式 npm --registry https://ip/repo...
用vue写一个npm包(package)，发布及引用
weixin_44434938的博客
02-20 3283
用vue写一个npm包(package)，发布及引用
环境搭建--npm仓库
weixin_43921491的博客
12-31 350
npm 操作步骤 npm:          关闭ssl: npm set strict-ssl false           设置npm库: npm config set registry  https://10.50.127.28:8443/repository/npm-group/ 网页进入测试 https://10.5
nexus使用笔记
junjiahuang的博客
09-10 245
hosted类型用来上传项目，group类型主要是主应用拉取子项目作为依赖。 npm只能登录hosted，无法登录group。尝试登录会报401错误。 创建库选择npm(hosted)和npm(group)类型，blob store最好去创建一个npm专用的。hosted选择allow redeploy。将security下的realms的npm bearer token realm从available移动到active。 ...
企业级npm仓库搭建
09-21 1779
之前写过一篇前端物料平台的搭建，其中涉及到使用私有npm仓库来管理前端物料，为此写一下企业的npm仓库搭建。那么企业为什么要搭建私有的npm仓库呢，我们平时大部分使用的是npm官方仓库的一些依赖库，但是针对企业级，企业需要开发自己的一些组件库和工具库，这些库需要在组织内部进行管理和共享，不能够上传npm公有仓库中，因此我们需要搭建企业私有仓库来解决这种问题。同时搭建私有仓库，能够提升npm包的安装下载速度和源的稳定性，比如淘宝镜像，本质上也是私有仓库。接下来我们介绍一下常用npm私有仓库框架。
【前端】使用nexus搭建本地npm仓库
xmzmqx的博客
01-19 2160
【搭建环境】 1、创建Blob Stores Name：npm 2、创建Repository 创建npm-hosted，填写Blob store：npm 创建npm-proxy，填写Blob store：npm，填写代理地址：https://registry.npm.taobao.org 创建npm-group，填写Blob store：npm，把npm-hosted和npm-proxy添加进来 示例地址：http://192.168.1.100:8081/repository/npm-g
Vue封装自定义组件并上传至npm
m0_67363703的博客
08-17 2720
vue 组件封装 上传npm
【Windows】使用Nexus搭建npm私库，管理npm包，并在项目中下载
HuangsTing的博客
06-06 6027
官网下载地址，进去后直接下载window系统的，需要挂VPN。 打开浏览器输入localhost:8081/即可访问（如果无法访问，输入127.0.0.1:8081/，或者使用本机ip地址+8081端口号）。 首次使用点击右上角Sign in。点击后，会提示用户名为admin，密码就在提示的文件内，登录成功后根据提示修改密码。 创建仓库，一共有3种类型。 Name可以自定义填写，hosted要改成allow redeploy，这样才能运行重复上传一个包，不然会报400：bad request。点击 Cre
vue封装自定义组件并上传到npm
一捆铁树枝的博客
12-22 3284
使用vue-cli3搭建团队的组件库并发布到npm 1.安装vue-cli3并创建一个项目 首先我们先安装开发必要的工具集,并创建一个项目: npm发包的常用基础知识
npm基本操作及命令详解
热门推荐
程序员「阿基米东」的编程之旅
01-24 1万+
概述 　　Node.js框架的最强大功能之一是能够轻松地使用Node包管理器（Node Package Manager，NPM）用额外的Node封装模块（NPM）将其扩展。 　　在Node.js的世界里，您可以看到NPM有几个意思： Node包管理器（服务于JavaScript） Node封装模块 此外，NPM还是一个网站（www.npmjs.com）和社区平台 本文所关注的npm
npm 私服（下）
为了而努力
07-21 7975
如何在npm私服（Nexus Repository Manager上建立）上传自己的代码1. npm Security 设置一个权限认证一开始我忽略了官网介绍中的这一段英文，没有设置权限认证，然后在上传代码的时候总是出现没有权限的错误提示。添加权限认证很好添加的，在Nexus上的realms中添加上npm Bearer Token Realms即可。 设置一个登陆账号使用$npm login –re
Vue自定义组件构建通讯录功能实战
“vue自定义组件实现通讯录功能，通过实例代码展示如何在Vue项目中构建一个功能完备的通讯录应用，包括自定义的header、list和alert组件，以及数据传递和事件处理。” 在Vue.js框架中，自定义组件是构建可复用和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值