当前位置：网站首页 > IT知识 > 正文

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

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

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

npm 指定版本

上一篇：Cursor MCP Server 配置与使用指南(Window)
下一篇：基于jeecgboot框架的cloud商城源码分享，兼容单体和微服务模式

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

第一步；

第二步：

第三步：

第四步：发布

相关推荐

飞牛OS入门安装遇到问题，如何解决?

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

用什么工具在Win中查看8G大的log文件?

如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse

Trae IDE 如何与 GitHub 无缝对接?

idea插件之maven search(工欲善其事，必先利其器)

如何修改图片拍摄日期?快速修改图片拍摄日期的6种方法