この記事は ShoTime Advent Calendar 2018 の 5 日目の記事です。
const requireComponent = require.context('../components', true, /^.\/(The|Base)[A-Z][a-zA-Z0-9]{0,}\.vue/)
requireComponent.keys().forEach(fileName => {
let baseComponentConfig = requireComponent(fileName)
baseComponentConfig = baseComponentConfig.default || baseComponentConfig
const baseComponentName = baseComponentConfig.name || (
fileName
.replace(/^.+\//, '')
.replace(/\.\w+$/, '')
)
Vue.component(baseComponentName, baseComponentConfig)
})
/^.\/(The|Base)[A-Z][a-zA-Z0-9]{0,}\.vue/
が正規表現で書かれています。上記に挙げたコードでは、 BaseApp.vue
TheHeader
のようなコンポーネント名を全て自動で読み込むようなコードになっています。
プロジェクトにあわせ適宜書き換えれば良い感じに Component を読み込めると思います。