vue插件的编写

一. 使用Vue.mixin() 可以把你创建的自定义方法混入所有的 Vue 实例。

例如下列代码：所有的 Vue 实例的 created 方法都被改成了我们自定义的方法
1.全局混入
 Vue.mixin({
  created: function(){
    console.log("success")
  }
})
2.在组件内混入
2.1. 在utils文件夹下定义mixin.js，记住他可以拥有vue实例的各种属性和方法
export default {
    data () {
        return {
            initData: 'mixin初始数据'
        }
    },
    mounted () {
        console.log('minxin的挂载输出')
    },
    methods: {
        doubleNum(num){
            return num*2
        }
    }
}
2.2 在组件内引用
<template>
    <div>
        <h1>{{ name }}</h1>
        <h2>{{ initData }}</h2>
        <h3>{{ num }}</h3>
        <h4>{{ mixinNum }}</h4>
    </div>
</template>

<script>
import mixin from '../utils/minxin';
export default {
    mixins: [mixin],
    data () {
        return {
            name: '混入组件',
            num: 10,
            // initData: '组件初始数据',
            mixinNum: this.doubleNum(10)
        }
    },
    mounted () {
        console.log("Hunru组件的挂载输出");
    },
}
</script>

1. 创建一个 utils.js 文件，将其暴露出去

  // 格式化时间
  export function parseTime(time, cFormat) {
    if (arguments.length === 0) {
      return null;
    }
    const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
    let date;
    if (typeof time === "object") {
      date = time;
    } else {
      if (typeof time === "string" && /^[0-9]+$/.test(time)) {
        time = parseInt(time);
      }
      if (typeof time === "number" && time.toString().length === 10) {
        time = time * 1000;
      }
      date = new Date(time);
    }
    const formatObj = {
      y: date.getFullYear(),
      m: date.getMonth() + 1,
      d: date.getDate(),
      h: date.getHours(),
      i: date.getMinutes(),
      s: date.getSeconds(),
      a: date.getDay()
    };
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
      let value = formatObj[key];
      // Note: getDay() returns 0 on Sunday
      if (key === "a") {
        return ["日", "一", "二", "三", "四", "五", "六"][value];
      }
      if (result.length > 0 && value < 10) {
        value = "0" + value;
      }
      return value || 0;
    });
    return time_str;
  }

2.再创建一个 plugin.js 文件，用于保存所有的自定义函数
2.1 插件格式

// 插件
const plugin = {
  install(){
    document.write('我是install内的代码')
  }
}
 
// 初始化插件
Vue.use(plugin); // 页面显示"我是install内的代码"

tips:官方文档明确表示了如果插件是一个install对象，那么你就必须提供install这个方法，那么在Vue.use()引入的时候就自然而然会去调用这个install方法了.
2.2 编写插件

import {parseTime} from './utils';
const plugin = {
    install:(Vue)=>{
        Vue.mixin({
        	filters:{
	        	$format:(value)=>{
	        		return parseTime(value)
				}
		}
    }
}

export default plugin

2.2.1 我们也可以通过添加到vue原型链上的方式使用

const plugin = {
    install:(Vue)=>{
        Vue.prototype.$tools = tools
    }
}
export default plugin

3.在 main.js 文件中使用 Vue.use() 来完成插件的装载

import plugin from "./plugin "
Vue.use(plugin)