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.rhkb.cn/news/274403.html

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

相关文章

linux ,Windows部署

Linux部署 准备好虚拟机 连接好查看版本&#xff1a;java -version安装jdk 解压命令&#xff1a;tar -zxvf 加jdk的压缩文件名cd /etc 在编辑vim profile文件 在最底下写入&#xff1a; export JAVA_HOME/root/soft/jdk1.8.0_151&#xff08;跟自己的jdk保持一致&#xff0…

初窥机器学习

人工智能 近几年来&#xff0c;人工智能&#xff08;AI&#xff09;已成为家喻户晓的术语&#xff0c;我们在游戏、电影&#xff08;还记得J.A.R.V.I.S吗&#xff1f;&#xff09;和书籍中经常看到它的提及和描绘&#xff0c;但人工智能究竟是什么呢&#xff1f; 人工智能简单…

go语言添加代理

LiteIDE 工具->管理 https://mirrors.aliyun.com/goproxy/或https://goproxy.cn,direct 命令行 go env -w GOPROXYhttps://goproxy.cn,direct

前端页面访问后台hiveserver2,阶段性报错

1、运行环境 Windows11下安装VMware&#xff0c;VMware下安装CentOS7 Linux系统&#xff0c;三台虚拟机集群部署hadoop&#xff0c;安装hive&#xff1b; 在Linux下安装Eclipse&#xff0c;创建maven工程&#xff0c;使用hive-jdbc-2.3.2访问hiveserver2 2、在windows11下&…

​如何防止网络攻击?

应对不同类型网络攻击的最佳途径是“知己”、“知彼”&#xff0c;在了解它们的工作原理、能够识别其手段、方法及意图的前提下&#xff0c;找出针对性的应对文案。今天&#xff0c;就为大家总结以下防止不同类型网络攻击的有效方法&#xff0c;希望无论是对个人、还是企业和组…

字节跳动也启动春季校园招聘了(含二面算法原题)

字节跳动 - 春招启动 随着各个大厂陆续打响春招的响头炮&#xff0c;字节跳动也官宣了春季校园招聘的正式开始。 还是那句话&#xff1a;连互联网大厂启动校招计划尚且争先恐后&#xff0c;你还有什么理由不马上行动&#xff1f;&#xff01; 先来扫一眼「春招流程」和「面向群…

RabbitMQ - 07 - 通过注解创建队列和交换机

之前消息模型的实现,都是通过rabbitMQ Management 控制台来手动创建 queue 和 exchange 的 在项目开发中有两种方式通过代码声明 创建 一种是通过 Bean 方式,这种代码量较大 稍繁琐 一种是通过注解的方式声明 先编写消费者代码 通过注解绑定了 消息队列,交换机,还有 routin…

​LeetCode解法汇总1261. 在受污染的二叉树中查找元素

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给出一个满足下述规则的二叉树&#xff1…

小程序学习 1

pages/goods/search/home.wxml首页功能设定 1. loading入场 2. 下拉刷新 3. 搜索栏 4. 分类切换 5. 商品列表 6. 规格弹层 7. 加载更多 <view style"text-align: center; color: #b9b9b9" wx:if"{{pageLoading}}"><t-loading theme"circula…

每日一题——LeetCode2129.将标题首字母大写

方法一 个人方法 将字符串转为数组&#xff0c;遍历数组&#xff0c;对数组的每一个元素&#xff0c;先全部转为小写&#xff0c;如果当前元素长度大于2&#xff0c;将第一个字符转为大写形式 var capitalizeTitle function(title) {titletitle.split( )for(let i0;i<tit…

同学,请实现一个扫码登录

大概的流程图如下 主要涉及到的是pc端、手机端和后台服务端。由于听产品同事说手机端由原生端&#xff08;安卓和IOS&#xff09;来实现&#xff0c;因此我这边只需要开发pc端就行&#xff0c;工作量直接减半有没有。做过该功能的小伙伴肯定了解&#xff0c;pc端的实现还是比较…

python淘宝网页爬虫数据保存到 csv和mysql(selenium)

数据库连接设置&#xff08;表和字段要提前在数据库中建好&#xff09; # 数据库中要插入的表 MYSQL_TABLE goods# MySQL 数据库连接配置,根据自己的本地数据库修改 db_config {host: localhost,port: 3306,user: root,password: ma*****6,database: may2024,charset: utf8mb…

一体机电脑辐射超标整改

电脑一体机是目前台式机和笔记本电脑之间的一个新型的市场产物&#xff0c;它将主机部分、显示器部分整合到一起的新形态电脑&#xff0c;该产品的创新在于内部元件的高度集成。随着无线技术的发展&#xff0c;电脑一体机的键盘、鼠标与显示器可实现无线链接&#xff0c;机器只…

云打印下载,云打印怎么使用?

互联网的发展让许多实体业务都受到了强烈的冲击&#xff0c;这其中打印业务也是其中之一。在当前云打印技术的推广下&#xff0c;现在有越来越多有打印需求的用户都开始选择性价比更高、打印更方便的云打印服务了。那么云打印下载&#xff0c;云打印怎么使用&#xff1f;今天小…

AIGC——ComfyUI 安装与基础使用

简介 ComfyUI是一个基于节点流程的稳定扩散操作界面&#xff0c;通过流程实现了更加精准的工作流定制和完善的可复现性。每个模块都有特定的功能&#xff0c;我们可以通过调整模块连接来实现不同的出图效果。然而&#xff0c;节点式的工作流也提高了一定的使用门槛。同时&…

leetcode代码记录(有序数组两数之和

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 给定一个已按照 升序排列 的整数数组 numbers &#xff0c;请你从数组中找出两个数满足相加之和等于目标数 target 。 函数应该以长度为 2 的整数数组的形式返回这两个数的下标值。numb…

25.5 MySQL 聚合函数

1. 聚合函数 聚合函数(Aggregate Function): 是在数据库中进行数据处理和计算的常用函数. 它们可以对一组数据进行求和, 计数, 平均值, 最大值, 最小值等操作, 从而得到汇总结果.常见的聚合函数有以下几种: SUM: 用于计算某一列的数值总和, 可以用于整数, 小数或者日期类型的列…

SpringBoot(容器功能)

文章目录 1.Configuration 添加/注入bean1.注入bean1.编写一个JavaBean&#xff0c;Monster.java2.创建一个config文件夹&#xff08;名字任意&#xff09;&#xff0c;用于存放配置Bean的类&#xff08;相当于配置文件&#xff09;3.BeanConfig.java4.测试使用 MainApp.java2.…

通过Office Web Viewer站点在线展示Office文档内容

方法&#xff1a; https://view.officeapps.live.com/op/view.aspx?src经Url编码的文档线上Url地址 比如&#xff1a; //以下地址来自一份旧项目代码&#xff0c;可见用的就是该方案function OfficeFileViewOnline(url, file_type, file_name) {url "http://14.23.112.2…

RPC通信原理

RPC通信原理 RPC的概念 如果现在我有一个电商项目&#xff0c;用户要查询订单&#xff0c;自然而然是通过Service接口来调用订单的实现类。 我们把用户模块和订单模块都放在一起&#xff0c;打包成一个war包&#xff0c;然后再tomcat上运行&#xff0c;tomcat占有一个进程&am…