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

const app = createApp({})

// 全局注冊(cè)一個(gè)名為hello-wolrd的組件
app.component('hello-wolrd', HelloWorld);

一旦我們?nèi)肿?cè)了組件，我們就可以在任何地方使用這個(gè)組件：<hello-wolrd/>

值得注意的是全局注冊(cè)會(huì)使Vue失去TypeScript的支持, Vue 3 有一個(gè) PR 擴(kuò)展了全局組件的接口。目前，Volar 已經(jīng)支持這種用法，我們可以通過在根目錄添加components.d.ts文件的方式來添加全對(duì)局組件的TypeScript的支持

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

局部注冊(cè)

我們可以直接從文件中引入vue組件使用，

在單文件組件中（SFC）

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

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

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

在JSX中

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

局部注冊(cè)的組件在其他組件中無法訪問，在其父組件或子組件或中均不可用，所以你需要在每個(gè)使用該組件的地方重新引入并注冊(cè)該組件

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

但是這種直接導(dǎo)入組件的方式還有一個(gè)好處，如果我們導(dǎo)入的組件使用了typescript，我們無需任何插件就可以在組件中獲得智能提示和類型檢查的功能

局部自動(dòng)注冊(cè)

可以看到局部注冊(cè)的優(yōu)點(diǎn)是比較明顯的，但是每次使用我們都需要重復(fù)導(dǎo)入，但是如果你的組件很多，你的組件注冊(cè)代碼看起來可能比較冗長(zhǎng)，我們可以使用unplugin-vue-components，自動(dòng)按需導(dǎo)入組件. 它會(huì)按需導(dǎo)入組件，但是不再需要導(dǎo)入和組件注冊(cè)

該插件會(huì)自動(dòng)對(duì)使用的組件生成一個(gè)components.d.ts從而獲得TypeScript的支持,

安裝插件

vite

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

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

rollup

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

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

webpack

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

然后我們可以像往常一樣在模板中使用組件，它會(huì)自動(dòng)進(jìn)行下面的轉(zhuǎn)換

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

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

轉(zhuǎn)換成

<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>

默認(rèn)它會(huì)在src/components目錄下查找組件，我們可以通過dirs參數(shù)來自定義組件目錄，其他配置參考github.com/antfu/unplu…

不同方案對(duì)比

	全局注冊(cè)	局部注冊(cè)	unplugin-vue-components
TypeScript支持	定義components.d.ts文件	默認(rèn)支持	自動(dòng)生成components.d.ts文件
組件作用域	全局	局部	局部
使用方法	全局注冊(cè)后使用	局部注冊(cè)后使用	添加插件后使用

關(guān)于組件名

定義組件名的方式有兩種：

使用 kebab-case：

Vue.component('my-component-name', { /* ... */ })
當(dāng)使用 kebab-case (短橫線分隔命名)定義一個(gè)組件時(shí)，
你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case，例如 <my-component-name>。

使用駝峰命名法PascalCase

Vue.component('MyComponentName', { /* ... */ })
當(dāng)使用 PascalCase (首字母大寫命名) 定義一個(gè)組件時(shí)，
你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。
也就是說 <my-component-name> 和 <MyComponentName>都是可接受的。
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時(shí)只有 kebab-case 是有效的。

所以我們一般建議組件都采用kebab-case這種命名方式。