Vue 3にグローバルコンポーネントを登録する

更新:現在official guideです.
Vue 2ドキュメントには、自動的にベースコンポーネントを登録するために大きなwayがあります.
幸いにも、これはVue 3で最小の変化で働き続けます.

始める
Vue CLIとVUE 3を使用してプロジェクトを開始するとすぐに、main.jsファイルでこのようなものが表示されます.

createApp(App).mount('#app')

ベースコンポーネントを追加するには少し変更しましょう.

const app = createApp(App)

app.mount('#app')

我々は我々の登録を追加するアプリをマウントする前に.
ここでは、componentsフォルダ内のすべてのコンポーネントが必要です.

const requireComponent = require.context(
  './components',
  true,
  /Base[A-Z]\w+.(vue|js)$/
)

コンポーネントのfoldersおよびindex.vueファイルを好む場合は、正規表現を変更する必要があります.

/Base[A-Z]\w+\/index.vue$/

最後に、すべてのコンポーネントを反復処理する必要があります.

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = upperFirst(
    camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  app.component(
    componentName,
    componentConfig.default || componentConfig
  )
})

これが本当の人生?
現実の実現を示すためにdemo appがあります.