开发插件并发布

项目开发中不同的系统经常遇到重复的自定义指令、组件等，直接复制代码比较冗杂，且如果需要改动，需要每个系统都改动一遍，非常不灵活。而将这些共通的部分封装成一个插件，使用时直接引用即可，大大减少冗余代码，优化代码结构。
vue开发插件要暴露一个install方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
以下是Vue官方提供的不同插件的开发方式。

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

发布插件

1.打包

创建一个单独的vue-cli项目，根目录建一个packages文件，放入插件文件包（注意，一定是完整的，引用到的方法也要加上）。如下图：

package.json中添加script命令：

"scripts": {    
      "build:lib": "vue-cli-service build --target lib --name loadmore --dest lib  packages/loadmore/index.js"
  }

编译组件，拿到lib文件。

2.准备发布

首先需要在 package.json 添加组件信息

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

main: 入口文件，应指向编译后的包文件；

keyword：关键字，以空格分割；

author：作者；

private：是否私有，需要修改为 false 才能发布到 npm；

license：开源协议。

{
  "name": "@tina/loadmore",
  "version": "1.0.1",
  "descrption":"loadmore based on vue.js that can load more data while scroll down", 
  "main":"lib/loadmore.umd.min.js",
  "license": "MIT",
  "author":"Tina",
}

3.设置忽略文件

创建 .npmignore 文件，设置忽略文件

该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

发布到npm

如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来

npm config set registry http://registry.npmjs.org 

如果没有 npm 账户，可以通过 npm adduser 命令创建一个账户，或者到 npm 官网注册

如果在官网注册的账户，或者以前就有账户，就使用 npm login 命令登录

具体流程可以参考官方文档

发布成功后就可以在项目中直接通过npm install --save packname安装，使用Vue.use命令注册，即可使用。