Vue2 全局注册挂载多个Vue组件

/* 方法一 */
import Vue from 'vue'

import KxImgUpload from './kx-img-upload.vue'
import ImportData from './import-data'
import KxImgPreview from './kx-img-preview.vue'
import FileList from './file-list.vue'
import Review from './review.vue'

Vue.component('file-list', FileList)
Vue.component('review', Review)
Vue.component('import-data', ImportData)
Vue.component('kx-img-upload', KxImgUpload)
Vue.component('kx-img-preview', KxImgPreview)

// 页面使用
main.js 中 import '@/views/components/index.js'

/* 方法二 */
import KxImgUpload from './kx-img-upload.vue'
import ImportData from './import-data'
import KxImgPreview from './kx-img-preview.vue'
import FileList from './file-list.vue'
import Review from './review.vue'

const viewsGlobalcompnent = {
  'kx-img-upload': KxImgUpload,
  'import-data': ImportData,
  'kx-img-preview': KxImgPreview,
  'file-list': FileList,
  'review': Review
}

export default {
  install(Vue, options) {
    Object.keys(viewsGlobalcompnent).forEach(key => {
      Vue.component(key, viewsGlobalcompnent[key]);
    });
  }
}

// 页面使用
// main.js 中
import viewsGlobalcompnent from '@/views/components'
Vue.use(viewsGlobalcompnent)

/* 方法三 */
export default {
  install(Vue, options) {
    //1.读取文件夹下的文件
    // const req = requeire.context('路径’，是否读取子文件夹，/正则匹配/)
    const req = require.context('./', false, /\.vue$/)
    console.log(req, 'req');
    // reg是一个function函数 (传读取文件路径后可导入文件)
    req.keys().forEach((item) => {
      // console.log(req(item).default, 'req(item).default')
      // req(item).default==导入了该文件路径
      const com = req(item).default
      //全局注册
      Vue.component(com.name, com)
    })
    // console.log(options, 'options')
  }
}

// 页面使用
// main.js 中
import viewsGlobalcompnent from '@/views/components'
Vue.use(viewsGlobalcompnent)