vue官方文檔（14）基礎元件的全局注冊

一、定義基礎元件

示例：BaseComponentTest.vue

<template>
    <h1>this is a basic component</h1>
</template>
<script>

export default {
  name: "BaseComponentTest"
}
</script>      

const requireComponent = require.context(
  // 其元件目錄的相對路徑，本例為components2目錄
  './components2',
  // 是否查詢其子目錄
  false,
  // 比對基礎元件檔案名的正規表達式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 擷取元件配置
  const componentConfig = requireComponent(fileName)

  // 擷取元件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 擷取和目錄深度無關的檔案名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注冊元件
  Vue.component(
    componentName,
    // 如果這個元件選項是通過 `export default` 導出的，
    // 那麼就會優先使用 `.default`，
    // 否則回退到使用子產品的根。
    componentConfig.default || componentConfig
  )
})      

<base-component-test></base-component-test>