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

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