При разработке на Vue часто приходится вручную импортировать и регистрировать компоненты. Это утомляет и засоряет код. Представьте, что вы используете десятки UI-компонентов (например, из Element Plus или Naive UI): каждый раз писать import Button from '...' и добавлять его в components не слишком приятно.
К счастью, есть решение — unplugin-vue-components. В связке с Vite он автоматически находит и подключает компоненты при их использовании в шаблонах.
Зачем это нужно?
- Меньше кода вручную — компоненты подключаются автоматически.
- Чище структура — нет десятков импортов в каждом файле.
- Удобная интеграция с UI-библиотеками — многие библиотеки поддерживаются «из коробки».
- Ленивая загрузка — плагин умеет генерировать импорты так, чтобы не тянуть лишнее.
Установка
Если проект уже создан через create-vue или vite, достаточно поставить пакет:
npm install -D unplugin-vue-components
или
yarn add -D unplugin-vue-components
Настройка в Vite
В vite.config.ts (или .js) подключаем плагин:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
vue(),
Components({
// Опции
}),
],
})
Теперь можно писать компоненты без импорта:
<template>
<MyButton />
</template>
Даже если MyButton.vue лежит в src/components, Vite всё подхватит.
Поддержка UI-библиотек
Плагин умеет работать с популярными UI-фреймворками. Например, для Element Plus:
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
Components({
resolvers: [ElementPlusResolver()],
})
Теперь можно использовать <ElButton> и другие элементы без ручных импортов.
Поддерживаются также Naive UI, Vuetify, Ant Design Vue, Headless UI, Vant и многие другие.
Оптимизация и автогенерация деклараций
Для TypeScript можно включить генерацию деклараций:
Components({
dts: 'src/components.d.ts',
})
Теперь редактор будет подсказывать компоненты с автодополнением, как будто они импортированы явно.
Кастомные правила
Если у вас свои каталоги или шаблон именования — это тоже решается:
Components({
dirs: ['src/components', 'src/shared'],
extensions: ['vue', 'tsx'],
deep: true,
})
Можно даже написать свои резолверы для подключения компонентов из npm-библиотек.
Когда стоит использовать?
- Если проект содержит много компонентов, и вы устали писать импорты.
- Если активно используете UI-библиотеки.
- Если хотите чистый и читаемый код.
Итог
unplugin-vue-components — один из тех инструментов, которые избавляют от рутины и делают разработку приятнее. В связке с Vite он работает молниеносно, а настройка занимает пару минут.
Попробуйте включить его в проект — и вы забудете о ручных импортах компонентов.
Добавить комментарий