手把手教你写vue插件

组件与插件的区别

组件: 对某功能或某模块的封装（例如 我们写的弹窗，loading）
插件: 对一系列组件的封装(例如 vuex,vue-router)
关系: 插件可以封装组件，组件暴露数据给插件

插件的优点

1.开箱即用
2.功能比组件更强大，更丰富
3.一次引入，终生收益
4.打包带走，随走随用
5.可以上传到npm官网装X（面试加分项）

如何制作一个插件

第一步 先封装一个组件（toast.vue）

因为插件是基于组件的，所以得先有一个组件
我们模仿一个element ui的简单组件（弹窗提示）
在src下面新建一个plugin的文件夹，文件夹内新建一个toast.vue的组件

<template>
  <div>
    <div class="toast"  ref='toastPosition' :class="{active: toastHidden}">
      <div class="toast-warpper">
         {{text}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
**// 需要注意的是 这个组件一定要有一个name，我们使用的时候直接调取name**
  name: 'test-toast',
  data () {
    return {
      text: '',
      toastHidden: false
    }
  },
  created () {
    // this.toastPlugin()
  },
  components: {
  },
  methods: {
  **// 定义一个操作它的方法 打开和关闭**
    toastPlugin (msg, time) {
      this.text = msg
      this.toastHidden = true
      //如果用户传了时间 就使用用户传过来的时间
      if(time){
      	 setTimeout(() => {
       		 this.toastHidden = false
      	 }, time)
      }else{
      //否则使用插件定义好的默认时间 这里设计2s后自动关闭
			 setTimeout(() => {
       		 this.toastHidden = false
      	 }, 2000)
		}
     
    }
  }
}
</script>
<style>
  .toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    min-height: 0px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
  }
  .toast.active {
    width: 150px;
    min-height: 25px;
    opacity: 1;
    z-index: 11;
  }
</style>

第二步 新建一个插件的入口文件 （test.js）

let test = {}

test.install = function (Vue, options) {
    // install的第一个参数Vue表示的是Vue的实例（Vue对象），
    // 第二个参数表示的是一些设置选项。
	//在这里我们也可以定义一些全局的属性和方法
    Vue.prototype.$msg = 'Hello I am test.js'
    Vue.prototype.$myMethod = ()=> {
       //do something
    }
    **// 把这个组件挂到全局**
    Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
  }
  // 暴露这个入口文件 否则其它页面调取不了
  export default test

第三步 在main.js里面全局引入

//把我们写好的组件引入进来
import testToast from './toast.vue'
//全局注册组件
Vue.use(testToast);

这样全局都可以使用了，而不是哪个页面使用都需要import引入。

第四步 使用我们的插件

在任何一个页面，直接调用就好了

//这个就是我们刚刚在组件里定义的name
<test-toast ref="toast"></test-toast>
//也可以调取插件里定义的方法
      this.$nextTick(()=>{
          //调用插件定义全局的方法
          this.$myMethod();
          //调用插件定义全局的属性
          console.log(this.$msg);
          //调用插件的方法 打开弹窗提示 
          //如果传了5000，则该插件5s后关闭，否则2s自动关闭
          this.$refs.toast.toastPlugin('请填写内容',5000);
        })

FAQ

插件的设计原则

设计插件的时候一定要看（这里以我们刚刚做好的这个插件为例）
1.一致性（与现实生活一致，界面保持一致，统一风格）
2.反馈 （使用生效给用户反馈）例如：弹窗出现
3.效率 （简化流程，清晰明确）例如：直接拿name使用
4.可控 （用户决策，结果可控）例如：有默认时间，用户也可以自由设置

如何做一款优秀的插件

1.需求分析: 存在是有意义的:这款插件主要为了解决什么问题
2.可扩展性 :很少有百分百吻合业务的插件:用户可以基于这个插件扩展自己的需求
3.组件组合 :满足多样化需求：例如list,可以在input里，可以在表格里
4.架构体系 : 1.继承体系：所有组件源头都是继承一个核心组件。2.进行分类（容器组件，功能组件分开）

下一篇教大家怎么上传npm官网