还在为每次都要导入组件而烦恼吗 ？

// 每次都需手动导入组件
import webName from '@/components/webName.vue'
  • 1.
  • 2.

用 unplugin-vue-components 来帮你吧，以后组件直接拿来用即可，无需再导入啦 ！

<webName />
  • 1.

vue3 【提效】自动注册组件 unplugin-vue-components 实用教程_vue.js

使用流程

1. 安装 unplugin-vue-components

npm i -D unplugin-vue-components
  • 1.

2. vite 配置中导入

vite.config.ts

import Components from 'unplugin-vue-components/vite'
  • 1.

plugins 中加入 Components

Components({}),
  • 1.

3. 新建组件

src/components 中的 vue 文件，会被自动注册！

新建 src/components/webName.vue

<template>
  <div>网站的名称</div>
</template>
  • 1.
  • 2.
  • 3.

4. 使用组件

src/views/test.vue

<template>
  <webName />
</template>
  • 1.
  • 2.
  • 3.

5. 重启项目

会重新生成 components.d.ts 文件（内部可见自动导入的组件）

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

访问页面正常渲染无报错，恭喜配置成功！

更多配置和用法见官网

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