手把手教你写vue插件并发表到npm上
csdh11 2025-05-08 17:34 9 浏览
我查看了很多的教程都感觉不是很适合新手;今天我就来一步一步地教大家怎么把写好的插件发表到npm上;也记录一下免得自己那天忘了;文笔不是很好;如果表述不是很好的地方请谅解;废话不多说;现在开始
第一步;
创建这样结构的一个文件夹;
lib文件:中存放你想要写的逻辑
index.js 主要是引入文件并暴露出去
package.js主要是进行何种配置
README.json 文件主要是用来说明
第二步:
配置 index.js 文件
import vueTouch from './lib/scrolls.vue' // 这个就是你平时写的 SFC 组件
// 这里要导出一个包含 install 方法的对象
const plugin = { // 这里要导出一个 install 方法
install (Vue, options) {
// 这里写你的代码,你可以全局注册组件,也可以写全局指令,也可以扩展 Vue 的方法
// 1. 全局组件
Vue.component(vueTouch.name, vueTouch)
// 2. 全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 3. 全局指令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
})
// 4. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 5. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
}
export default plugin
第三步:
配置package.json文件
{
"name": "vue-zh-time", // npm包名
"version": "1.0.1", // 版本
"description": "vue plugins",
"main": "index.js",
"directories": {
"lib": "lib" // 源码文件
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "z", // 作者
"license": "ISC"
}
第四步:发布
首先登陆;这儿主要输入你npm的账户和密码还有邮箱
npm login // 登陆
登陆成功以后就可以发布了
npm publish // 发布
我自己写了一个公告栏滚动和定时器;都发布成功并且可以下载使用都没有问题;大家都可以去试试吧
滚动事件
npm i vue-zh-scroll
定时器
npm i vue-zh-time
相关推荐
- pdf怎么在线阅读?这几种在线阅读方法看看
-
pdf怎么在线阅读?我们日常生活中经常使用到pdf文档。这种格式的文档在不同平台和设备上的可移植性,以及保留文档格式和布局的能力都很强。在阅读这种文档的时候,很多人会选择使用在线阅读的方法。在线阅读P...
- PDF比对不再眼花缭乱:开源神器diff-pdf助你轻松揪出差异
-
PDF比对不再眼花缭乱:开源神器diff-pdf助你轻松揪出差异在日常工作和学习中,PDF文件可谓是无处不在。然而,有时我们需要比较两个PDF文件之间的差异,这可不是一件轻松的事情。手动逐页对比简直是...
- 全网爆火!580页Python编程快速上手,零基础也能轻松学会
-
Python虽然一向号称新手友好,但对完全零基础的编程小白来讲,总会在很长时间内,都对某些概念似懂非懂,每次拿起书本教程,都要从第一章看起。对于这种迟迟入不了门的情况,给大家推荐一份简单易懂的入门级教...
- 我的名片能运行Linux和Python,还能玩2048小游戏,成本只要20元
-
晓查发自凹非寺量子位报道|公众号QbitAI猜猜它是什么?印着姓名、职位和邮箱,看起来是个名片。可是右下角有芯片,看起来又像是个PCB电路板。其实它是一台超迷你的ARM计算机,不仅能够运...
- 由浅入深学shell,70页shell脚本编程入门,满满干货建议收藏
-
不会Linux的程序员不是好程序员,不会shell编程就不能说自己会Linux。shell作为Unix第一个脚本语言,结合了延展性和高效的优点,保持独有的编程特色,并不断地优化,使得它能与其他脚本语言...
- 真工程师:20块钱做了张「名片」,可以跑Linux和Python
-
机器之心报道参与:思源、杜伟、泽南对于一个工程师来说,如何在一张名片上宣告自己的实力?在上面制造一台完整的计算机说不定是个好主意。最近,美国一名嵌入式系统工程师GeorgeHilliard的名片...
- 《Linux 命令行大全》.pdf
-
今天跟大家推荐个Linux命令行教程:《TheLinuxCommandLine》,中文译名:《Linux命令行大全》。该书作者出自自美国一名开发者,兼知名Linux博客LinuxCo...
- PDF转换是难题? 搜狗浏览器即开即看
-
由于PDF文件兼容性相当广泛,越来越多的电子图书、产品说明、公司文告、网络资料、电子邮件选择开始使用这种格式来进行内容的展示,以便给用户更好的再现原稿的细节,但需要下载专用阅读器进行转化才能浏览的问题...
- 彻底搞懂 Netty 线程模型
-
点赞再看,养成习惯,微信搜一搜【...
- 2022通俗易懂Redis的线程模型看完就会
-
Redis真的是单线程吗?我们一般说Redis是单线程,是指Redis的网络IO和键值对操作是一个线程完成的,这就是Redis对外提供键值存储服务的主要流程。Redis的其他功能,例如持久化、异步删除...
- 实用C语言编程(第三版)高清PDF
-
编写C程序不仅仅需要语法正确,最关键的是所编代码应该便于维护和修改。现在有很多介绍C语言的著作,但是本书在这一方面的确与众不同,例如在讨论C中运算优先级时,15种级别被归纳为下面两条原则:需要的...
- 手拉手教你搭建redis集群(redis cluster)
-
背景:最近需要使用redis存储数据,但是随着时间的增加,发现原本的单台redis已经不满足要求了,于是就倒腾了一下搭建redistclusterredis集群。好了,话不多说,下面开始展示:...
- 记录处理登录页面显示: HTTP Error 503. The service is unavailable.
-
某天一个系统的登录页面无法显示,显示ServiceUnavailableHTTPError503.Theserviceisunavailable,马上登录服务器上查看IIS是否正常。...
- 黑道圣徒杀出地狱破解版下载 免安装硬盘版
-
游戏名称:黑道圣徒杀出地狱英文名称:SaintsRow:GatOutofHell游戏类型:动作冒险类(ACT)游戏游戏制作:DeepSilverVolition/HighVoltage...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)