还在为每次都要导入组件而烦恼吗 ?
js
// 每次都需手动导入组件
import webName from '@/components/webName.vue'
用 unplugin-vue-components 来帮你吧,以后组件直接拿来用即可,无需再导入啦 !
html
<webName />
![](https://img-blog.csdnimg.cn/direct/a2f1a2348d8e44ac88108765413ddb5a.png)
使用流程
1. 安装 unplugin-vue-components
bash
npm i -D unplugin-vue-components
2. vite 配置中导入
vite.config.ts
ts
import Components from 'unplugin-vue-components/vite'
plugins 中加入 Components
json
Components({}),
3. 新建组件
src/components 中的 vue 文件,会被自动注册!
新建 src/components/webName.vue
html
<template>
<div>网站的名称</div>
</template>
4. 使用组件
src/views/test.vue
html
<template>
<webName />
</template>
5. 重启项目
会重新生成 components.d.ts 文件(内部可见自动导入的组件)
ts
WebName: typeof import('./src/components/webName.vue')['default']
访问页面正常渲染无报错,恭喜配置成功!
更多配置和用法见官网