如何发布插件到npm-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何发布插件到npm。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先你需要注册一个npm账号 npm 网址：https://www.npmjs.com/

如何发布插件到npm,node.js,npm,node.js,源码软件

点击 Sign in 跳转到登录页面

如何发布插件到npm,node.js,npm,node.js,源码软件

点击 Create Account 进行一个新建账户

如何发布插件到npm,node.js,npm,node.js,源码软件

注册完成后会有一封邮件发送一个一次性密码，到时候验证一下就行。

如何发布插件到npm,node.js,npm,node.js,源码软件

登录完成之后点击你的头像点击Account 进行验证

如何发布插件到npm,node.js,npm,node.js,源码软件

我这里是验证过了就不多做叙述了，

这边账号弄好后将你的组件放入配置好的文件夹中我这里是这么配置的

如何发布插件到npm,node.js,npm,node.js,源码软件

这里的pluhins装的是我的组件，

README是说明文档

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-tree-transfres",
  "version": "1.0.1",
  "description": "vue plugins",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "J_C",
  "license": "ISC",
  "dependencies": {
    "vue-tree-transfres": "^1.0.1"
  }
}

这里配置完成后打开你的终端

输入 npm login 进行npm账号登录

如何发布插件到npm,node.js,npm,node.js,源码软件