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

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

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

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

第一步；

第二步：

第三步：

第四步：发布

相关推荐

Python实现人事自动打卡，再也不会被批评

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

python使用fitz模块提取pdf中的图片

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

第一步；

第二步：

第三步：

第四步：发布

相关推荐

Python实现人事自动打卡，再也不会被批评

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

python使用fitz模块提取pdf中的图片

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄