還在為每次都要導入組件而煩惱嗎 ？

// 每次都需手動導入組件
import webName from '@/components/webName.vue'

用 unplugin-vue-components 來幫你吧，以后組件直接拿來用即可，無需再導入啦 ！

<webName />

使用流程

1. 安裝 unplugin-vue-components

npm i -D unplugin-vue-components

2. vite 配置中導入

vite.config.ts

import Components from 'unplugin-vue-components/vite'

plugins 中加入 Components

Components({}),

3. 新建組件

src/components 中的 vue 文件，會被自動注冊！

新建 src/components/webName.vue

<template><div>網站的名稱</div>
</template>

4. 使用組件

src/views/test.vue

<template><webName />
</template>

5. 重啟項目

會重新生成 components.d.ts 文件（內部可見自動導入的組件）

WebName: typeof import('./src/components/webName.vue')['default']

訪問頁面正常渲染無報錯，恭喜配置成功！

更多配置和用法見官網

https://www.npmjs.com/package/unplugin-vue-components