vue3 【提效】自动注册组件 unplugin-vue-components（含组件名的默认生成规则，自定义组件名生成规则，解析器 resolvers）

朝阳39

已于 2025-02-22 09:23:20 修改

阅读量1.3k

点赞数 17

分类专栏： Vue3 文章标签： vue.js

于 2024-06-27 17:53:44 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/140019854

版权

Vue3 专栏收录该内容

70 篇文章

订阅专栏

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

// 每次都需手动导入组件
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']

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

组件名的默认生成规则

会忽略路径信息，仅依据文件名生成，去除文件扩展名（如 .vue），并将文件名中的连字符（-）转换为驼峰命名法。

src/components/my-component.vue，生成的组件名是 MyComponent
src/components/my/my-component.vue，生成的组件名还是 MyComponent

自定义组件名生成规则

directoryAsNamespace 选项

将组件所在的目录名作为命名空间添加到组件名中
vite.config.js 中

Components({
      directoryAsNamespace: true, // 开启目录作为命名空间
      collapseSamePrefixes: true, // 折叠相同的前缀
      deep: true // 深度搜索组件目录
    })

src/components/admin/UserList.vue 生成的组件名会是 AdminUserList。

transform 函数

Components({
      transform: (name) => {
        // 自定义组件名生成规则，例如添加特定前缀
        return `Custom${name}`;
      }
    })

my-component.vue 生成的组件名会是 CustomMyComponent

解析器 resolvers

不同的解析器有自己的组件名生成规则。

Ant Design Vue 解析器

按照 Ant Design Vue 组件库的命名规则来生成组件名，例如 a-button 会被解析为 AButton。

// vite.config.js 或 webpack.config.js 等配置文件
const Components = require('unplugin-vue-components/webpack');
const { AntDesignVueResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
};

Element Plus 解析器

遵循 Element Plus 组件库的命名规范，如 el-button 会被解析为 ElButton。

// vite.config.js 或 webpack.config.js 等配置文件
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
};