百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

手把手教你写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...

Exchange Server 2019 实战操作指南

...