Vue自动导入组件、ui(Element-ui)库、或者 vue hooks的设置

尤大推荐的神器 unplugin-vue-components ，解放双手！以后再也不用呆呆的手动引入组件、ui(Element-ui)库、或者 vue hooks等了。 安装：

npm install unplugin-vue-components -D

直接写组件名即可，插件会帮你引入进来 注意别重名

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src'],
     // 组件的有效文件扩展名。
      extensions: ["vue"],
      // 搜索子目录
      deep: true,
      // ui库解析器，也可以自定义
      // resolvers: [VantResolver()],
      // 配置文件生成位置
      dts: 'src/components.d.ts'
    })
  ]
})

插件会生成一个自己组件路径的components.d.ts文件

// components.d.ts

/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    App: typeof import('./App.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    Test: typeof import('./views/Test/index.vue')['default']
  }
}