前言：通常在vue的开发中，我们会使用到各式各样的插件库，比如说最常见的elementUI、vant等。通常我们只会使用这些插件，却不知道其中的原理。现在我来记录一下，从0到1开发一个简单的插件，然后再发布到npm官网开源的整个过程。以后有时间的时候，可以通过这种方式开发出更多的插件，从而提高工作和开发的效率。

源码：DGT的自定义插件

首先，通过脚手架vue create 创建一个基本的vue结构的框架项目，用来专门存放你所开发的插件库（如果你在现有的项目中去进行插件的发布可能会导致影响到原来的项目的功能）。

在src目录下创建plugins文件夹用来存放你所开发的插件

创建基本的组件，这个你可以自定义，随意写一个组件，这里以一个vue项目中最常见的提示框组件为例。

dgtmessage.vue:

<template>
  <div ref="messageVueRef" class="messageVue" :class="{isShowActive:showStatus}">
      这是通知消息
  </div>
</template>


<script>
export default {
    name:'dgt-message',
    data(){
        return{
            showStatus:false,
        }
    },
    methods:{
        MessageFun(isShow=false){
            this.showStatus = isShow
            setTimeout(()=>{
                this.showStatus = false
            },2000)
        }
    }
}
</script>


<style>
.messageVue{
    display: none;
    width: 150px;
    height: 30px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
}
.isShowActive{
    display: block;
     background: rgba(0,0,0,0.8);
    width: 150px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 1;
}
</style>

这里实现的功能很简单，抛出了一个方法，接收显示和隐藏来控制组件的显示和隐藏。

目录下新建index.js，用来编写你的install入口方法，这个文件会自动读取当前plugins文件下所有的vue后缀结尾的组件，进行自动注册。所以不需要像传统的组件一个一个进行注册，做到了自动识别。

index.js:

const requireComponent = require.context('./', true, /\.vue$/);
// require提供的一个读取文件的方法，第一个参数是路径，第二个参数是是否读取所有子目录，第三个是正则以vue结尾的文件
// 必须要提供一个install方法，这个方法用作在Vue.use方法里面自动识别install方法并执行。传入的参数是Vue
const install = (Vue) => {
    if (install.installed) return;
// 如果有注册过则返回
    install.installed;
// 没有注册过则进行注册
    console.log(requireComponent.keys())
// 获取拿到的所有组件
    requireComponent.keys().forEach(fileName => {
        // 拿到当前的组件
        const config = requireComponent(fileName)
        // 拿到当前组件的组件名
        const componentName = config.default || config
        Vue.component(componentName.name, config.default || config)
    });
}
// 环境检测
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

修改package.json

 {"name": "dgt-message",
  "version": "0.1.0",
  "private": false,
  "description": "一个简易的弹窗插件，用来讲述npm插件的开发与上传",
  "license": "MIT",
  "main": "lib/dgt-message.umd.min.js", // 先不写
  .
  .
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name dgt-message --dest lib src/plugins/index.js"
  },// 补充lib打包指令，指定名称dgt-message,目标路径lib 为插件的入口js

这里有几个需要注意的点，name属性必须跟组件提供的name值一致，version指定版本号，默认的private都是true，需要修改成false。license这里选择的是‘’MIT‘’main最后再进行指定。

然后在终端运行

npm run lib //打包

然后会在根目录下生成一个lib文件

这里需要注意两个文件，第一个是dgt-message.css，这个文件需要在main.js中手动引入。

dgt-message.umd.min.js这个文件需要补充上面那个 "main": "lib/dgt-message.umd.min.js"

最后一步

npm login // 登录到npm官网
// 输入账号，密码，邮箱
npm publish

最后登录到你的npm主页，你就会发现多了一个刚刚上传的插件。

使用

使用的时候，跟其他的插件使用方式一致，当你开发的是一个UI组件，你需要引入插件，并引入插件的样式文件

当你开发的是一个指令，或者没有样式文件则仅引入插件即可。

import dgtMessagr from 'dgt-message'
import 'dgt-message/lib/dgt-message.css';
Vue.use(dgtMessagr)

项目中

<template>
  <div class="hello">
    <button @click="testPop">测试</button>
    <dgt-message ref="messageRef"></dgt-message>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    testPop(){
      console.log(this.$refs.messageRef)
      this.$refs.messageRef.MessageFun('shimie')
    }
  }
}
</script>

到此，一个完整的插件开发流程已经全部完成。通过这种方式，你还可以在index.js里面不仅仅是进行组件的注册，还可以开发一些自定义的指令。后面会继续补充这一块。

玖叶教程网

前端编程开发入门

npm插件开发以及上传（npm查看插件版本号）

使用