1、初始化项目

首先，使用vue-cli初始化项目，项目初始化以后目录结构如下：

初始化以后目录的项目目录结构

在项目根目录下创建components文件夹（名称自己定义）用于存放插件。

2、开发插件

在创建好的用于存放插件的文件夹下新建index.js文件，此文件用于导出全局组件。 此时在插件目录下再次新建文件夹，在此文件夹下新增index.vue和index.js文件。index.vue文件用于组件开发，index.js用于导出组件，后续按需引入。 在此以倒计时countdown插件为例，目录结构如下：

插件目录结构

components/countdown/index.vue文件是组件的开发文件，需要注意的是必须声明组件的标签name属性！！！具体代码如下：

<template>
   <span :style="[style]">  {{sum}}  </span> 
</template>
<script>
export default {
   name: 'countdown',
   props: {
       count: {  type: Number, default: 60  },
       step: {  type: Number,   default: 1 },
       abort: {  type: Number,  default: 0   },
       fontSize: {   type: String, default: '16px'   },
       fontWeight: {  type: String,   default: '600'   },
       color: {  type: String,  default: '#000000'  }
   },
   computed: {
       style() { return {   color: this.color, fontSize: this.fontSize,   fontWeight: this.fontWeight  }  }
   },
   data() {
    return {  
       sum: this.count  
     }
   },
   methods: {
       countDown(options) {
           const config = { 
              count: options.count ?? 60,  step: options.step ?? 1,  abort: options.abort ?? 0  
           }
           setTimeout(() => { 
                if (config.count == config.abort) { 
                    this.$emit('count-done', config); 
                 } else {
                   config.count --;  
                   this.sum = config.count;   
                   this.$emit('counting', config)        
                   this.countDown(config)
                 }     
             }, config.step * 1000)
       },
       start() {    
         const config = {
            count: this.count, 
             step: this.step,
             abort: this.abort
         };     
         this.countDown(config)   
       }
   }
}
</script>  

components/countdown/index.js，用于导出单个组件，用做按需引入，具体代码如下：

// 导入组件，组件必须声明 name
import CountDown from './index.vue'
//为组件添加install方法
CountDown.install = Vue => {
//注册组件
    Vue.component(CountDown.name, CountDown)
}
//最后导出组件，用于按需引入
export default CountDown;

3、组件的全局注册和导出

编辑components/index.js文件，配置全局注册和导出，这里解释下 require.context（明白的大佬请忽略）：
require.context函数接受三个参数：
1. directory {String} -读取文件的路径
2. useSubdirectories {Boolean} -是否遍历文件的子目录
3. regExp {RegExp} -匹配文件的正则
require.context函数执行后返回的是一个函数,并且这个函数有3个属性:
1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
2.keys {Function} -返回匹配成功模块的名字组成的数组
3. id {String} -执行环境的id,返回的是一个字符串
具体注册以及导出源码如下：

const requireComponent = require.context('./', true, /\.vue$/)    
//定义全局install方法
const install = Vue => {
    if (install.installed) return;
    install.installed = true;
    // 遍历并注册全局组件
    requireComponent.keys().map(filename => {
        const module = requireComponent(filename);
        Vue.component(module.default.name, module.default)
    })
}
window && window.Vue&&install(window.Vue)
export default install;

到此，插件开发、注册和导出基本已经完成，接下来测试一下。

4、测试插件

两种方式导入插件，第一种是在main.js里面全局导入，调用Vue.use方法全局注册，第二种是在组件中按需导入。这里采用第二种方式，截图如下：

启动项目，看看运行结果是否能计时，结果如下：

计时效果

5、打包插件

打包插件需要以下四个参数：
target: 默认为构建应用，改为lib启用构建库模式
name: 输出文件名
dest: 输出目录，改为** lib**
entry: 入口文件路径，改为components/index.js
在package.json添加命令

执行yarn lib或者npm run lib命令，开始编译插件。

6、发布到npm官网

如果你还没有注册账号，则需要前往npmjs官网注册，注册完成以后修改package.json编辑插件信息，如下：

注意private必须为false，main入口文件，即你编译的文件路径，其他的按照自己的信息填写。
在项目根目录下执行npm publish发布到npmjs官网。
至此，搞定！！！如有什么地方有纰漏的请指正。