Vue.use及vue 全局、局部注册插件

全局引入方法一

在src/utils/vue-use目录下, 下面新建 plugins.js

// plugins.js
const fun = () => {
    return "方法一";
}
function getRandColor() {
    let tem = Math.round(Math.random() * colorListLength)
    return colorList[tem]
}
const colorList = [
    '#F9F900',
    '#6FB7B7'
]
const colorListLength = 20
const obj = {
    name: 'crj',
    age: 18
}
export default {
    fun,
    getRandColor,
    colorList,
    colorListLength,
    obj
}

全局引入，在入口文件main.js引入

import globalFun from "@/utils/vue-use/plugins"
Vue.prototype.$globalFun = globalFun

// 然后就可以全局使用plugins.js里面的方法了，
this.$globalFun.fun(); 
this.$globalFun.getRandColor()
this.$globalFun.colorList
this.$globalFun.colorListLength
this.$globalFun.obj

组件中引入

<script>
import globalFun from '@/utils/vue-use/plugins'
export default {
  data () {
    return {
      getColor: globalFun.getRandColor
    }
  },
  mounted() {
      globalFun.fun()
      globalFun.getRandColor()
      globalFun.colorList
      globalFun.colorListLength
      globalFun.obj
  },
}
</script>

全局引入方法二

在src/utils/vue-use目录下, 下面新建 commen.js

export default {
    install(Vue, options) {　　
        Vue.prototype.fun3 = function() {
            console.log(options); // 结果：参数
            return '方法三'
        }
    }
}
// 在入口文件main.js引入
import globalFun3 from "@/utils/vue-use/commen"
Vue.use(globalFun3, '参数');

// 然后就可以全局使用commen.js里面的方法了
this.fun3()

全局引入方法三

在src/utils/vue-use目录下, 下面新建 base.js

exports.install = function(Vue, options) {
    Vue.prototype.text1 = function() { //全局函数1
        alert('执行成功1');
    };
    Vue.prototype.text2 = function() { //全局函数2
        alert('执行成功2');
    };
};
// 在入口文件main.js引入
import base from '@/utils/vue-use/base' //引用
Vue.use(base); //将全局函数当做插件来进行注册
// 然后就可以全局使用base.js里面的方法了
this.text1()
this.text2()

Vue.use 介绍

在src/utils/vue-use目录下, 下面新建 plugins.js，index.js

// 文件:  src/utils/vue-use/plugins.js
const Plugin1 = {
    install(a, b, c) {
        console.log('Plugin1 第一个参数:', a);
        console.log('Plugin1 第二个参数:', b);
        console.log('Plugin1 第三个参数:', c);
    },
};
function Plugin2(a, b, c) {
    console.log('Plugin2 第一个参数:', a);
    console.log('Plugin2 第二个参数:', b);
    console.log('Plugin2 第三个参数:', c);
}
export { Plugin1, Plugin2 };

// 文件: src/utils/vue-use/index.js
import Vue from 'vue';
import { Plugin1, Plugin2 } from './plugins';
Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

// 然后我们在入口文件main.js引用这段代码
import Vue from 'vue';
import '@/classes/vue-use';
import App from './App';
Vue.config.productionTip = false;
new Vue({
    el: '#app',
    render: h => h(App),
});

全局模板

在src/components/loading目录下, 下面创建loading.vue及index.js文件

// loading.vue
<template>
  <div class="loading-box"> 
    Laoding...
  </div>
</template>

// index.js
// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading = {
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install: function (Vue) {
        Vue.component('Loading', LoadingComponent)
    }
}
// 导出
export default Loading

全局引入，在入口文件main.js引入

import Loading from '@/components/loading/index'
Vue.use(Loading)

Vue.use 与 Vue.prototype 是vue注册插件的两种方式

相同处：实现的原理都是在Vue.prototype上添加了一个方法
不同处：Vue.prototype适合于注册vue生态外的插件 Vue.use适合于注册vue生态内的插件

vue.prototype.$xxx: 
	是在vue的原型链上挂在一个变量、
	添加符号 $ 是防止被组件中的变量意外覆盖、
	利用函数原型上的属性 / 方法在函数实例化后可以通过this.$xxx在任意实例上读取
Vue.use() 需要传入参数 Object 或 Function （前端通常是Object）
	如果是 Object 那么这个 Object 需要定义一个 install 方法
	如果是 Function 那么这个函数就被当做 install 方法
	Vue.use() 需要在 new Vue() 之前完成
	同一个插件多次使用Vue.use()也只会被运行一次
	Vue.use主要是执行install方法，而install主要也是执行Vue.prototype方法。
	所以，其实Vue.use()方法的核心就是Vue.prototype，只不过又封装了一层,更加的灵活，扩展性更好

理解：把vue理解成一棵树，Vue.use和Vue.prototype都是在这颗树上挂载插件的方式，不同之处是使用vue.prototype，插件不需要实现install方法，简单粗暴，拿来就用，但是灵活性不如Vue.use(), 而Vue.use()，却要求插件必须实现instal方法或者该插件本身就是函数，在install方法可以完成自己的逻辑， 所以Vue.use()的方式更加的强大，灵活，扩展性更好。
但是两者并没有高低之分， 只是有着各自的应用场景，Vue.prototype适合于非Vue生态的插件，而Vue.use()适合于Vue生态内的插件，两者互相配合，一个简单实用，一个灵活扩展性好。
而且，Vue.use的实现依赖于Vue.prototype，
最本质的理解就是Vue.use包裹着Vue.prototype进一步的封装了一次。