编写vue插件并注册

第一步：新建组件（Alert.vue）

  <!--自定义弹窗组件-->
  <template>
    <div id='T_mask' v-if='popus' @close='hide()'>
        <div class="wraper">
            <h4 class='tile' v-if='titleData'>{{titleData}}</h4>
            <div class='content'>
                <input class='txtval' type="text" v-model="val" v-if='txtContent'>
                <div v-if='message'>{{message}}</div>
            </div>
            <div class="btnBox">
              <button @click='setData()'>确定</button>
              <button v-if='isCache' @click='close()'>取消</button>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
      props:['titleData','popus','txtContent','message','isCache'],
      data(){
          return {
              val:"",//要传递到父组件中的值
          }
      },
      methods:{
          //定义一个方法使用$emit()向父组件中传值
          setData(){
              //第一个值是参数名，放在父组件中用@绑定，第二个参数是要传递到父组件中的值
              this.$emit('setVal',this.val);
              this.close();
          },
          close(){
              this.$emit('hideSelf');
              this.val = "";
          }
      }
  }
  </script>
  
  <style scoped>
  *{
      margin: 0;
      padding: 0;
  }
  #T_mask{
      background-color: rgba(0,0,0,0.5);
      width:100%;
      height:100%;
      top: 0;
      left: 0;
      z-index: 9998;
      position: fixed;
  }
  .wraper{
      width: 16em;
      height: 10em;
      border: none;
      background-color: #fff;
      position: absolute;
      left:50%;
      margin-left: -8em;
      top:25%;
      z-index: 9999;
  }
  .wraper .tile {
      border-bottom: 1px solid #ddd;
      height: 2em;
      line-height: 2em;
      text-align: center;
      font-size: 1em;
      font-family: Microsoft YaHei;
      font-weight: 400;
  }
  .wraper .content{
      width: 100%;
      height: 5em;
      line-height: 5em;
      text-align: center;
      position: absolute;
      bottom: 3.2em;
  }
  .wraper .txtval{
      width:14em;
      height: 2em;
  }
  .wraper .btnBox{
      position: absolute;
      width:100%;
      bottom: 1em;
      left: 50%;
      margin-left: -8em;
  }
  .wraper .btnBox button{
      display: inline-block;
      width:5em;
      height: 2em;
      border:none;
      background-color:#2fbf15;
      color:#fff;
      text-align: center;
      margin: 0 0.4em;
  }
  .wraper .btnBox button:nth-of-type(2){
      background-color: #f00;
  }
  </style>

第二步：注册组件。（新建plugs.js）<用来注册所有编写的组件>

  //导入开发完的组件
  import Alert from './Alert';
  ...
  //定义插件
  const myplugs = {
      //定义install方法将组件注册到vue上。
      install(Vue,options){
          //前边是定义的对外组件名，后边Alert是开发的组件
          Vue.component('myAlert',Alert);
          ...
      }
  };
  //最后将插件导出即可，最后在全局引用，在main.js中
  //1、使用import myplugs from './lib/plugs';
  //2、使用Vue.use(myplugs)即可
  export default myplugs;