教你如何开发vue插件并发布到npm

1.首先使用vue脚手架搭建一个vue项目出来
在这里我们不做搭建项目详解如有疑问请查阅vue-cli官方文档
2.第二步就是在项目的src目录下新建一个我们的插件目录比如views，然在views下创建一个插件入口文件index.js, 一个插件文件areaCode.vue (当然了文件命名都随意)

index.js代码

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

import areaCode from './areaCode.vue'
let test = {}
test.install = function (Vue, options) {
    Vue.myGlobalMethod = function () {
        // 逻辑...
    }

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

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

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // 逻辑...
    }
    Vue.component(areaCode.name, areaCode) // areaCode.name 组件的name属性
}
export default test

areaCode.vue代码

<template>
  <div class="areaCode">
    <div class="onlineBox" @click="onClick" :style="styelData">
      <div class="onlineBox1">{{value}}</div>
      <img class="onlineBox2" src="../assets/Drop-downArrow.png" alt />
    </div>
    <ul class="ul-css" v-if="isShow.show" :style="listStyle">
      <li
        v-for="(item,index) in codeData"
        :key="index"
        @click="liClick(item)"
      >+{{item.tel}} {{item.name}}({{item.en}})</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "area-code", // 这里需要注意下，我们是采用的全局注入我们的组件，所以在后面因为我们的组件后，会直接使用这个命名的标签
  props: {
    styelData: {
      type: Object
      // default: {}
    },
    listStyle: {
      type: Object
    }
  },
  data() {
    return {
      value: "+86",
      isShow: {
        show: false
      },
      codeData: [
        {
          short: "CN",
          name: "中国",
          en: "China",
          tel: "86"
        },
        {
          short: "AD",
          name: "安道尔共和国",
          en: "Andorra",
          tel: "376"
        },
        {
          short: "AE",
          name: "阿拉伯联合酋长国",
          en: "UnitedArabEmirates",
          tel: "971"
        }
      ]
    };
  },
  components: {},

  methods: {
    onClick() {
      this.isShow.show = true;
    },
    liClick(item) {
      this.value = "+" + item.tel;
      this.isShow.show = false;
      this.$emit("selectChange", item.tel);
    }
  }
};
</script>

<style>
.onlineBox {
  width: 80px;
  height: 35px;
  border: 1px solid #ccc;
  position: relative;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.ul-css {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  margin: 0;
  overflow: scroll;
}
.ul-css li {
  text-align: left;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul-css > li:hover {
  background: #ccc;
}
.onlineBox1 {
  float: left;
  width: 70%;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}
.onlineBox2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
}
</style>

到这里一个简单的 插件就完成了下一步就开始调试

3.一般我们的的插件都是通过npm下载依赖，下载下来的包都放在node_modules里，但是我们是调试，就先不用这样只需要在见一个vue文件比如 test.vue
使用代码如下
styelData和listStyle是接收样式的，selectChange是监听事件获取参数的。

<template>
  <div class="hello">
    <area-code :styelData="styelData" :listStyle="listStyle" @selectChange="selectChange"></area-code>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      styelData: {
        width: "100px",
        height: "35px"
      },
      listStyle: {
        width: "200px",
        height: "300px"
      }
    };
  },
  methods: {
    selectChange(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>

到这里我们的调试就结束了下面就开始把插件发布到npm
在发布前需要修改package.json文件里的两个字段
private改为false
main指向我们插件的入口index.js文件

4.首先我们得去npm注册一个账号 npm官网，然后通过命令行的方式进行登录 npm login，登录的时候可能会出现密码输入不了的情况，就是你输入了但是Password哪里没有直接输就可以了，是可以登录的
登录完成之后在执行 npm publish 命令

这样一个插件就发布上去了，然后去npm官网就可以搜到你的插件。