vue 下载的插件从哪里上传?npm发布插件详细记录

文章参考:

参考文章一:

封装vue插件并发布到npm详细步骤_vue-cli 封装插件-CSDN博客

参考文章二:

npm发布vue插件步骤、组件、package、adduser、publish、getElementsByClassName、important、export、default、target、dest_export default install-CSDN博客

背景:

我想把我写的一个JS发布成一个插件,这样就可以通过“npm”命令去实现安装插件

如:

npm install 插件名称  

npm i 插件名称  

第一步:创建项目

 vue create jjychengtoolsbox

如果你赶时间,下面的错误记录可以跳过 ,直接看第二步

如果你赶时间,下面的错误记录可以跳过 ,直接看第二步

如果你赶时间,下面的错误记录可以跳过 ,直接看第二步

我这里报错了

 

 ERROR  Failed to get response from https://registry.npm.taobao.org/binary-mirror-config

 ERROR  Failed to get response from https://registry.npm.taobao.org/binary-mirror-config

网上找了找说是 我的淘宝镜像源无效

 

查看npm的镜像源

npm config get

; "builtin" config from C:\Program Files\nodejs\node_modules\npm\npmrcprefix = "C:\\Users\\cpeng\\AppData\\Roaming\\npm"; "user" config from C:\Users\cpeng\.npmrcpython = "C:\\Users\\cpeng\\AppData\\Local\\Programs\\Python\\Python37\\python.exe"
Python = "C:\\Users\\cpeng\\AppData\\Local\\Programs\\Python\\Python37\\python.exe"
registry = "https://registry.npm.taobao.org/"
sass_binary_site = "https://npm.taobao.org/mirrors/node-sass"; node bin location = C:\Program Files\nodejs\node.exe
; cwd = D:\2 CodeTest\JJYChengScrollListening.js\VuePackage_JJYChengSL
; HOME = C:\Users\cpeng
; Run `npm config ls -l` to show all defaults.

应该是这2个出现了问题

registry = "https://registry.npm.taobao.org/"
sass_binary_site = "https://npm.taobao.org/mirrors/node-sass"

修改镜像源,修改为官方的

npm config set registry https://registry.npmjs.org
npm config set sass_binary_site https://registry.npmjs.org

查看修改结果

npm config get
; "builtin" config from C:\Program Files\nodejs\node_modules\npm\npmrcprefix = "C:\\Users\\cpeng\\AppData\\Roaming\\npm"; "user" config from C:\Users\cpeng\.npmrcpython = "C:\\Users\\cpeng\\AppData\\Local\\Programs\\Python\\Python37\\python.exe"
Python = "C:\\Users\\cpeng\\AppData\\Local\\Programs\\Python\\Python37\\python.exe"
registry = "https://registry.npmjs.org/"
sass_binary_site = "https://registry.npmjs.org"; node bin location = C:\Program Files\nodejs\node.exe
; cwd = D:\2 CodeTest\JJYChengScrollListening.js\VuePackage_JJYChengSL
; HOME = C:\Users\cpeng
; Run `npm config ls -l` to show all defaults.

这么看的话,应该是没有问题了

继续创建项目

vue create vuepackage_jjychengsl

继续报错

网上找了找说是缓存问题

更新npm缓存

npm cache clean --force

这个样子应该是更新好了

继续创建项目

记得把文件夹下面,之前创建的项目文件夹给删了

不删的话也行,你创建项目它会提示你,你选择 覆盖(Overwrite)就行了

vue create vuepackage_jjychengsl     

我这里选择vue2

继续报错误,实在是无语了。。。

清空npm缓存

其实,上面也警告了,我没注意

npm WARN using --force Recommended protections disabled.

大致意思是被禁用了,不能用

使用“npm cache verify”

npm cache verify

【*】问题完整解决过程和解决方法

我这里不再重复写了,项目完整的解决方法和记录,请点击下面文章

文章地址:

【已解决】ERROR Failed to get response from https://registry.npm.taobao.org/binary-mirror-config,完成解决方法

【已解决】ERROR Failed to get response from https://registry.npm.taobao.org/binary-mirror-config,完成解决方法-CSDN博客


第二步:新建插件

此时你的目录结构应该是这样的,如下图

在 “根目录\src\”下新建npmPackage文件夹

在新建的npmPackage文件夹下,新建jjychengtoolsbox.js文件

新建的jjychengtoolsbox.js文件,内容如下:

var jjychengtoolsbox = {};
// 检查是否手机端访问
jjychengtoolsbox.IsMobileFun = function () {if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {return true;}else {return false;}
}
export default jjychengtoolsbox;

 如果你发布的是“组件”的一定要看看这篇文章

 如果你发布的是“组件”的一定要看看这篇文章

 如果你发布的是“组件”的一定要看看这篇文章

封装vue插件并发布到npm详细步骤_vue-cli 封装插件-CSDN博客

 主要是这段代码

import wqButton from './wqButton/index.vue'
import wqClock from './wqClock/index.vue'const comArr = [wqButton, wqClock];// 注册组件
export default install = (Vue) => {comArr.forEach(item => {Vue.component(item.name, item)  // item.name就是引入组件中的name属性,所以每个组件都需要name})
};

使用Vue提供的install方法,这个方法会在使用Vue.use(plugin)时被调用,这样就能让我们需要导出的组件注册到全局, 就可以在任意组件中像使用子组件一样直接使用导出的组件


第三步:插件打包

此时你的项目目录是这样的,如下图

在跟节点找到“package.json”文件,并打开他,找到"scripts"节点,新增下面内容

{"package": "vue-cli-service build --target lib ./src/npmPackage/jjychengtoolsbox.js --name jjychengtoolsbox --dest jjychengtoolsbox"
}

内容介绍

--target lib 指定打包的目录
--name 打包后的文件名
--dest 打包后的文件夹名称

"scripts"节点完整代码

  "scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","package": "vue-cli-service build --target lib ./src/npmPackage/jjychengtoolsbox.js --name jjychengtoolsbox --dest jjychengtoolsbox"},

执行打包命令

npm run package

 

打包好后的,你的根目录会多一个刚才你命名的文件夹,如下图

里面的文件如下


第四步:完善你的插件信息

4.1增加package.json文件

注意文件里不能有注释

注意文件里不能有注释

注意文件里不能有注释

我的信息如下:

{"name": "jjychengtoolsbox","version": "1.0.2","description": "jjychengtoolsbox常用工具箱","main": "jjychengtoolsbox.common.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["获取URL参数","获取Cookie","设置Cookie","时间万能转换-兼容IE","截取字符串","过滤全部html","生成随机数","检查是否手机端访问"],"author": "JJY.Cheng blogUrl:https://cplvfx.blog.csdn.net/","license": "ISC"
}

字段说明:

{"name": "",  // 发布的包名,发布线上后,可以通过 npm install 该名称 来引用该包"version": "0.0.0",  // 版本号"description": "",  // 描述"main": "",  // // 打包后的入口文件,若不配置,则在其他项目中就无法使用import xx from '包名'来引入组件,只能以包名作为起点来指定相对路径"scripts": {  // 运行命令"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [  // 关键词,可以通过npm搜索你填写的关键词找到你的包],"author": "cplvfx",  // 作者"private": false,  // 是否设为私有包"license": "ISC"  // 代码授权许可
}

你也可以通过下面命令生成文件

npm init -y

 但,必须保证,生成文件时,你的命令路径是在,打包好的文件夹下;

 但,必须保证,生成文件时,你的命令路径是在,打包好的文件夹下;

 但,必须保证,生成文件时,你的命令路径是在,打包好的文件夹下;

如我的

 4.2增加README.md文件

我的内容如下

# jjychengtoolsbox## 介绍
"获取URL参数",
"获取Cookie",
"设置Cookie",
"时间万能转换-兼容IE",
"截取字符串",
"过滤全部html",
"生成随机数",
"检查是否手机端访问"## 作者"author": "JJY.Cheng","blogUrl":https://cplvfx.blog.csdn.net/"

第五步:注册并登录的npm

保持你的命令路径在生成包的目录下,

保持你的命令路径在生成包的目录下,

保持你的命令路径在生成包的目录下,

接下来不在提示

 

5.1 注册

可去npm官网注册: https://www.npmjs.com;

5.2 登录

5.2.1检查镜像源

检查镜像源是否是npm官方镜像源,如果不是就需要设置;

检查镜像源是否是npm官方镜像源,如果不是就需要设置;

检查镜像源是否是npm官方镜像源,如果不是就需要设置;

查看命令

npm config list

如下图,我的就不是

执行修改命令

npm config set registry=https://registry.npmjs.org

修改后

5.2.2 登录

登录命令

npm login

依次输入账号、密码、邮箱以及邮箱里收到的一次性密码,

如果输入邮箱之后一直卡在那里不动的话可以试试

npm login -d

第六步:发布

发布之前可去npm官网搜索一下你这个包名是否跟里面的包有重名的,

有的话不能发,也可以使用命令测试

npm i 你的包名

6.1执行发布命令

npm publish

你可以npm官网搜索你的插件

npm | Home

6.2更新插件

更新插件,从第三步第六步操作一遍就行了。

记得一定要去插件目录下,package.json文件,修改version节点的值


 安装使用

安装代码

npm i jjychengtoolsbox

引入

import jjychengtoolsbox from 'jjychengtoolsbox';

使用

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><table border="1" style="margin:0 auto;"><tr><td>名称</td><td>描述</td><td>例子</td></tr><tr><td>GetQueryStringFun<br/>根据名称获取URL参数</td><td><p>如url:http://localhost:8081/?id=1</p><p>我想拿到id的值</p></td><td>id={{jjyT.GetQueryStringFun('id')}}</td></tr><tr><td>getCookieFun<br/>获取Cookie</td><td><p>如:</p><p>jjyT.setCookieFun('jjyT','jjychengtoolsbox',1)</p></td><td>{{jjyT.getCookieFun('jjyT')}}</td></tr><tr><td>DateTimeConvertFun<br/>时间万能转换-兼容IE</td><td>如:<br/>时间戳:1709977671<br/>时间字符串:2024-3-9 17:47:51<br/></td><td>时间戳:{{jjyT.DateTimeConvertFun('1709977793','yyyy年mm月dd日')}}<br/>时间字符串:{{jjyT.DateTimeConvertFun('2024-3-9 17:47:51','yyyy年mm月dd日')}}<br/></td></tr></table><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';
import jjychengtoolsbox from 'jjychengtoolsbox';
export default {name: 'App',components: {HelloWorld},data(){return {txt:'你号',jjyT:{},}},created(){this.jjyT=jjychengtoolsbox;console.log(this.txt)console.log(jjychengtoolsbox)//设置Cookiethis.jjyT.setCookieFun('jjyT','jjychengtoolsbox',1);//设置Cookie}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
table{width: 800px;
}
table td{text-align: left;
}
</style>

更新

npm update jjychengtoolsbox

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/732434.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能驾驶规划控制理论学习08-自动驾驶控制模块(轨迹跟踪)

目录 一、基于几何的轨迹跟踪方法 1、基本思想 2、纯追踪 3、Stanly Method 二、PID控制器 三、LQR&#xff08;Linear Quadratic Regulator&#xff09; 1、基本思想 2、LQR解法 3、案例学习 基于LQR的路径跟踪 基于LQR的速度跟踪 4、MPC&#xff08;Mode…

day59 线程

创建线程的第二种方式 实现接口Runnable 重写run方法 创建线程的第三种方式 java.util.concurrent下的Callable重写call()方法 java.util.concurrent.FutureTask 创建线程类对象 获取返回值 线程的四种生命周期 线程的优先级1-10 default为5&#xff0c;优先级越高&#xff0c…

基于梯度统计学的渐变型亮缝识别算法

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、场景痛点 在图像处理相关的实际工程中&#xff0c;会出现各式各样的现实复杂问题&#xff0c;有的是因为机械设计导致&#x…

【洛谷 P8668】[蓝桥杯 2018 省 B] 螺旋折线 题解(数学+平面几何)

[蓝桥杯 2018 省 B] 螺旋折线 题目描述 如图所示的螺旋折线经过平面上所有整点恰好一次。 对于整点 ( X , Y ) (X, Y) (X,Y)&#xff0c;我们定义它到原点的距离 dis ( X , Y ) \text{dis}(X, Y) dis(X,Y) 是从原点到 ( X , Y ) (X, Y) (X,Y) 的螺旋折线段的长度。 例如 …

蓝桥杯练习系统(算法训练)ALGO-981 过河马

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 在那个过河卒逃过了马的控制以超级超级多的走法走到了终点之后&#xff0c;这匹马表示它不开心了……   于是&#xff0c…

Java教程:RabbitMq讲解与SpringBoot项目如何对接RabbitMq实现生产者与消费者

在往期文章中&#xff0c;我们讲了如何在Windows与Linux环境下安装RabbitMq服务&#xff0c;并访问Web管理端。 有很多同学其实并不知道RabbitMq是用来干嘛的&#xff0c;它起到一个什么作用&#xff0c;并且如何在常见的SpringBoot项目中集成mq并实现消息收发&#xff0c;本章…

Nginx实现高并发

注&#xff1a;文章是4年前在自己网站上写的&#xff0c;迁移过来了。现在看我之前写的这篇文章&#xff0c;描述得不是特别详细&#xff0c;但描述了Nginx的整体架构思想。如果对Nginx玩得透得或者想了解深入的&#xff0c;可以在网上找找其他的文章。 ......................…

day17_订单(结算,提交订单,支付页,立即购买,我的订单)

文章目录 订单模块1 结算1.1 需求说明1.2 获取用户地址1.2.1 UserAddress1.2.2 UserAddressController1.2.3 UserAddressService1.2.4 UserAddressMapper1.2.5 UserAddressMapper.xml 1.3 获取购物项数据1.3.1 CartController1.3.2 CartService1.3.3 openFeign接口定义 1.4 环境…

NIFI从Oracle11G同步数据到Mysql_亲测可用_解决数据重复_数据跟源表不一致的问题---大数据之Nifi工作笔记0065

首先来看一下整体的流程: 可以看到了用到了上面的这些处理器,然后我们主要看看,这里之前 同步的时候,总是出现重复的数据,奇怪. 比如源表中只有166条数据,但是同步过去以后变成了11万条数据了. ${db.table.name:equals(table1):or(${db.table.name:equals(table2)})} 可以看…

【精选好刊】JCR2区SCI仅17天上线见刊,最后10篇版面!

录用案例 JCR2区地质环境类SCI&EI (进展顺) 【期刊简介】IF&#xff1a;3.0-4.0&#xff0c;JCR2区&#xff0c;中科院3/4区&#xff1b; 【检索情况】SCI&EI双检&#xff1b; 【征稿领域】地球观测、环境监测和管理相关或结合研究均可&#xff1b; 【案例分享】重…

前端面试练习24.3.8

防抖和节流 防抖&#xff08;Debouncing&#xff09;&#xff1a; 防抖是指在短时间内连续触发同一事件时&#xff0c;只执行最后一次触发的事件处理函数。 在实际应用中&#xff0c;常常用于处理用户输入的搜索框或者滚动事件。例如&#xff0c;当用户连续输入搜索关键词时&am…

业务代码中如何使用装饰器模式?

装饰器模式&#xff08;Decorator Pattern&#xff09;介绍 装饰器模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;我们可以动态地给一个对象添加额外的职责。而不是通过继承增加子类的方式来扩展对象的功能&#xff0c;装饰器模式使用组合的…

[N1CTF 2018]eating_cms 不会编程的崽

题倒是不难&#xff0c;但是实在是恶心到了。 上来就是登录框&#xff0c;页面源代码也没什么特别的。寻思抓包看一下&#xff0c;数据包直接返回了sql查询语句。到以为是sql注入的题目&#xff0c;直到我看到了单引号被转义。。。挺抽象&#xff0c;似乎sql语句过滤很严格。又…

Java基础知识点之思维导图

一、走进Java编程世界 二、变量常量和运算符 三、if选择结构 四、switch选择结构 五、while循环结构 六、for循环结构 七、数组 八、类与对象 九、深入循环结构 十、类的无参方法 十一、类的带参方法 十二、字符串

读已提交隔离级别下竟然有间隙锁

业务背景 广告主痛点的为进行一次全媒体联合投放&#xff0c;若投放10个媒体&#xff0c;需要制作和上传10个创意、50张不同尺寸和出血区要求的图片和视频素材、近100个元素&#xff0c;投放成本极高。这也是制约部分用户使用新产品投放的原因。 因此进行升级。以三个创意为例…

Prometheus添加nginx节点显示不支持stub_status 解决办法

1、我们在使用Prometheus监控添加nginx节点监控的时候&#xff0c;在被监控节点的nginx配置文件中添加下面的模块 server { listen 80; server_name localhost; location /stub_status { stub_status on; access_log off; …

微服务技术栈SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式(四):消息队列MQ

文章目录 一、消息队列MQ二、RabbitMQ2.1 单机部署2.2 消息模型 三、SpringAMAP3.1 简单消息队列3.2 工作消息队列3.3 发布-订阅模型&#xff1a;FanoutExchange 广播交换机3.4 发布-订阅模型&#xff1a;DirectExchange 路由交换机3.5 发布-订阅模型&#xff1a;TopicExchange…

Day29:安全开发-JS应用DOM树加密编码库断点调试逆向分析元素属性操作

目录 JS原生开发-DOM树-用户交互 JS导入库开发-编码加密-逆向调试 思维导图 JS知识点&#xff1a; 功能&#xff1a;登录验证&#xff0c;文件操作&#xff0c;SQL操作&#xff0c;云应用接入&#xff0c;框架开发&#xff0c;打包器使用等 技术&#xff1a;原生开发&#x…

推房子游戏c++

这段代码是一个推箱子游戏的实现。游戏中有一个地图&#xff0c;地图上有墙壁、人、箱子和目标位置。玩家通过键盘输入WASD或方向键来控制人物的移动&#xff0c;目标是将所有的箱子推到相应的目标位置上。 代码中的dt数组表示地图&#xff0c;每个位置上的字符表示对应的元素…

c语言在线聊天室

c语言基于tcp和多线程的在线聊天室(c语言通讯系统)功能需求 1.实现多线程 2.构建socke套接字实现一对一通信 3.实现多个电脑的通信 4.数据传输加密和解密 5.多人实时聊天 6.具备群聊和私聊的功能 实现原理: 服务端公网Ip暴露,客户端端口随机分配,通过服务端公网IP连接,服务端…