Vue.use注册全局组件(扩展自动注册全局组件)

Vue.use()的作用是通过全局方法 Vue.use() 使用插件
插件通常用来为 Vue 添加全局功能，可以通过全局方法 Vue.use() 使用插件，而且它需要在你调用 new Vue() 启动应用之前完成

注册全局组件

plugin.js 代码如下：

// object --- 对象中包含install方法
const plugin1 = {
    install(vue, options){
        console.log("带有install方法的对象");
        console.log("plugin1 第一个参数",vue)
        console.log("plugin1 第二个参数",options)
     }
}

// Function --- 直接是一个方法
function plugin2(vue, options) {
    console.log("不带install方法的方法");
    console.log("plugin2 第一个参数", vue)
    console.log("plugin2 第二个参数", options)
}

export { plugin1, plugin2 }

main.js 代码如下：

import Vue from 'vue'
import App from './App.vue'

import {plugin1,plugin2} from './.../plugin.js'

Vue.use(plugin1,'插件1的参数')
Vue.use(plugin2,'插件2的参数')


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

总结:

Vue.use(js对象/function,参数)
js对象：{
    install(Vue,options){
      // 在Vue.use后，该方法会执行  
    }
}
function:function(Vue,options){
  // 在Vue.use后，该方法会执行    
}

自动注册全局组件

 1.读取lib文件夹下的所有以.vue结尾的文件  方法: require.context('路径','是否读取子文件夹','正则匹配')

• 返回值是一个函数该函数有一个keys(),该方法能返回所有的路径 是一个数组)

 2.拿到读取文件的路径
 3.导入处理

• 在返回的函数中传入路径(传入读取文件的路径后可导入该文件)

// 自动导入文件  注册全局组件  在Vue.use() 时执行
export default {
  install(Vue, options) {
    // /\.vue$/ 以.vue结尾的文件  得到每一个./路径下的.vue文件的路径
    const req = require.context('./', true, /\.vue$/)
    
    req.keys().forEach((item) => {
      console.log(req(item).default, '所有组件信息')
      // req(item).default  理解成导入了该路径文件
      const com = req(item).default
      // 自动 全局注册(组件都有name属性名与值) 否则使用Vue.component("自定义标签名", com)
      Vue.component(com.name, com)
    })
    console.log(options,'全局注册')
  }
}

main.js中...

// 使用vue.ues
import libJS from '@/.../lib/index.js'

Vue.use(libJS, '全局注册')

以上方式  则可以自动识别lib文件下所有以.vue结尾的文件,进行自动读取路径后导入注册