百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

手把手教你写vue插件并发表到npm上

liuian 2025-05-03 15:16 30 浏览

我查看了很多的教程都感觉不是很适合新手;今天我就来一步一步地教大家怎么把写好的插件发表到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

相关推荐

最强神级选择系统(无敌之最强神级选择系统)

8.自由高达《机动战士高达SEED》  7.V高达《机动战士高达V》  6.00高达《机动战士高达00》  5.独角兽高达《机动战士高达UC》  4.倒A高达《倒A高达》  3.V2高达《机动战士高...

惠普服务器售后电话客服热线

售后官网:https://support.hp.com/cn-zh/check-warranty该网站为惠普全新一站式服务支持平台,小惠将为您提供专业的技术解答和产品导购。同时提供全面的自助解决方案...

win10改成win7界面(win10改为win7界面)

1、首先我们打开你的电脑,选择打开左下角的开始菜单。2、打开后就选择设置按钮。3、打开之后就是这个页面往下拉,你就会看见更新,就是红圈圈里面,打开它。4、打开之后就是这个页面。5、然后我们在左侧选择恢...

win10系统怎么恢复系统还原(win10系统恢复怎么操作)

1、开机不断点击F8键,进入系统操作选单,选“最后一次正确配置”,重启电脑,看能否解决。2、开机不断点击F8键,进入系统操作选单,选“安全模式”,如能成功进入,依次单击“开始”→“所有程序”→“附件”...

怎么把电脑c盘格式化(怎么把c盘格式化吗)

1.在进行c盘格式化之前,必须备份重要的数据,以免数据丢失。2.在格式化c盘之前,确保所有的应用程序和系统文件都已经备份。否则,在进行格式化之后,将需要重新安装操作系统和所有的应用程序。3.如果...

中国移动赠送的wifi6路由器(192.168.10.1中国移动路由器)

移动tclwifi6路由器很好的。WiFi6路由器远强于WiFi5路由器,值得购买性价比不错。家庭生活中网速慢最主要的原因并非速率,而是穿墙效果。坐在离路由器很近的地方,手机网速一般不会有问题。...

office2010如何激活免费使用
  • office2010如何激活免费使用
  • office2010如何激活免费使用
  • office2010如何激活免费使用
  • office2010如何激活免费使用
win官网网址(win官方网站)

具体方法如下:打开电脑,在浏览器地址栏输入window,就会进入win中文官网,然后再寻找自己需要的软件,升级包等就可以了。下面是windows官网网址:1http://www.microsoft.c...

电脑的任务栏不见了怎么恢复
  • 电脑的任务栏不见了怎么恢复
  • 电脑的任务栏不见了怎么恢复
  • 电脑的任务栏不见了怎么恢复
  • 电脑的任务栏不见了怎么恢复
wifi网址登录入口(wifi网址登录入口有哪些)

wifi网页登录入口是网关地址192.168.1.1.1.首先检查路由器线路连接(参考前面手机设置路由器部分)2.将电脑Tnternet协议(TCP/IP)属性设置为“自动获取IP地址”和“自...

没有驱动程序怎么安装打印机

(1)启动电脑进入Windows操作系统,在桌面上单击开始-设置-打印机。(2)用鼠标右单击安装好的打印机图标,在弹出的右键菜单中选择属性,然后单击打印测试页按钮。(3)此时打印机会打出一页信息,从这...

u盘怎么取消写保护状态(u盘如何解除写保护状态)

如果您的U盘被设置为写保护,您可以尝试以下方法来关闭写保护:1.检查U盘上的物理开关:一些U盘上可能有一个物理开关,用于启用或禁用写保护。请检查U盘的外壳,看看是否有这样的开关,并将其切换到未锁定的...

压缩文件查看器(压缩文件查看器密码是多少)

1,打开手机上面的文件管理器,找到要压缩的WPS文件。2,长按一下WPS文件,然后选择要压缩的文件。3,点击右下角的【更多】,选择【压缩】。4,对压缩文件进行保存,压缩完成。扩展资料:wps产品特点1...

键盘哪个是截图键(键盘中的截图键是哪一个)

1、按Prtsc键截图这样获取的是整个电脑屏幕的内容,按Prtsc键后,可以直接打开画图工具,接粘贴使用。也可以粘贴在QQ聊天框或者Word文档中,之后再选择保存即可。2、按Ctrl+Prtsc键截图...

flash插件电脑版下载(flash插件下载安装)

可以不安装,不安装对电脑也不会有什么影响。友情提示,最好安装,这个也不会占用你多少内存,它是用来播放网页中的flash文件的。如果你不安装,网页中的flash动画就不能正常播放。浏览器也会提示你安装!...