vue小技巧———一鍵全局註冊組件

我們在做vue項目時，有些頻繁使用的組件，你還需要每次使用的時候都 import 麼？那麼往這看過來
第一步
把需要頻繁使用的組件放在一起，同級新建 global.js

import Vue from 'vue'

function changeStr(str) {
  return str.charAt(0).toUpperCase() + str.slice(1)   //國際慣例，組件首字母大寫
}

const requireComponent = require.context('.', false, /\.vue$/)   //  '.' 表示同級目錄
requireComponent.keys().forEach((fileName) => {
  const config = requireComponent(fileName)
  const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
  Vue.component(componentName, config.default || config)
})

第二步
在main.js中引入 global.js 即可