Vue组件如何自动按需引入详析

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld'

const app = createApp({})

// 全局注册一个名为hello-wolrd的组件
app.component('hello-wolrd', HelloWorld);

declare module 'vue' {
  export interface GlobalComponents {
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
  }
}

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

import HelloWolrd from './components/HelloWorld.vue'
export default {
  name: "item",
  render(){
    return (
      <HelloWolrd msg="Welcome to Your Vue.js App"/>
    )
  }
}

import HelloWolrd from './components/HelloWorld.vue'

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ })
  ]
}

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名)定义一个组件时，
你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName>都是可接受的。
注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。