текст перекладу
Ручний імпорт vs. Авто-імпорт
Імпорт, імпорт, імпорт 🫠… саме так виглядала верхня частина екрану більшості Vue SFC до того, як я почав використовувати авто-імпорт. Завдяки цій чудовій функції вам більше не доведеться вручну писати багато цих імпортів!
Якщо ви вже працювали з Nuxt 3, то, ймовірно, помітили, що він має вбудований авто-імпорт компонентів, композиційних функцій, допоміжних функцій та Vue API. Ця функція, серед інших, робить Nuxt потужним фреймворком з чудовим досвідом розробки.
У цьому посібнику я покажу, як налаштувати авто-імпорт для всіх проектів Vue 3. Час навести порядок!
Налаштування
По-перше, встановіть ці 2 плагіни:
npm install unplugin-auto-import unplugin-vue-components
При погляді на назви пакетів очевидно, що unplugin-vue-components призначений для авто-імпорту компонентів Vue, а unplugin-auto-import — для авто-імпорту скриптів.
Обидва пакети підтримують різні збирачі (bundlers). Вам доведеться вирішити, чи використовувати Vite, Rollup, Webpack чи Rspack. Для Vite конфігурація, ймовірно, буде в vite.config.ts:
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport(),
Components()
]
})
Далі ми заглибимося в конфігурацію.
Авто-імпорт скриптів
Розглянемо конкретну конфігурацію unplugin-auto-import для Vite:
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
imports: [
// Пресети
'vue',
'vue-router',
'vue-i18n',
'pinia',
'@vueuse/core',
'vee-validate',
// Користувацькі імпорти
{
'axios': [
// Імпорт за замовчуванням
['default', 'axios']
],
'@josempgon/vue-keycloak': [
// Іменовані імпорти
'useKeycloak',
// Псевдоніми
['getToken', 'getKeycloakToken']
],
'@/stores/auth': ['useAuthStore'] // Імпорт Pinia store
'@/composables/serverValidation': [
'useServerValidation' // Імпорт composable
]
},
// Тільки тип імпорту
{
from: 'vue-router',
imports: ['RouteLocationRaw'],
type: true,
}
],
// Автоматично генерувати типи
dts: true,
// Авто імпорт у шаблоні Vue
vueTemplate: true
})
]
})
Як ви бачите, плагін поставляється з багатьма пресетами для Vue та популярних плагінів, що спрощує налаштування. Однак ви можете визначити власні імпорти бібліотек JavaScript, плагінів Vue, сховищ Pinia та composables. Також можливо імпортувати тільки типи.
Для правильного використання плагіна з Typescript, потрібно увімкнути dts та налаштувати tsconfig.json:
{
//...
"include": [
// ...
"auto-imports.d.ts",
],
"exclude": [
"node_modules"
// auto-imports.d.ts не повинно бути в полі exclude
]
//...
}
Увімкнення імпорту в шаблоні Vue vueTemplate: true сильно рекомендується, але це залишається на ваш вибір.
Авто-імпорт компонентів
Добре, давайте зробимо щось схоже з компонентами. Для цього ми скористаємося іншим пакетом під назвою unplugin-vue-components, який допоможе нам з цим:
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver // Перегляньте повний список бібліотек у документації
} from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
текст перекладу
Components({
resolvers: [
// Вбудований резолвер
ElementPlusResolver(),
// Користувацький резолвер
(componentName) => {
// Де componentName завжди у форматі CapitalCase
if (['ValidationForm', 'ValidationField'].includes(componentName))
return { name: componentName.split('Validation')[1], from: 'vee-validate' }
}
],
dts: true // Автоматично генерувати типи
})
]
})
```
Є 3 способи авто-імпорту компонентів:
1) Вбудований резолвер
Для тих, хто використовує бібліотеки компонентів UI для Vue, є кілька вбудованих резолверів для найбільш популярних, таких як Vuetify, Ant Design Vue та Element Plus. Ви можете переглянути повний список бібліотек у документації. У цьому випадку вам просто потрібно імпортувати відповідний резолвер.
2) Логіка, заснована на папках
Щоб використовувати цю функцію, потрібно дотримуватися певної логіки в структурі папок компонентів та їхніх назв:
Структура проекту Vue для ввімкнення авто-імпорту компонентів
Усі назви компонентів у папці повинні починатися з назви папки, щоб увімкнути авто-імпорт. Крім того, компоненти, назва яких починається з App, будуть імпортуватися за замовчуванням!
3) Користувацький резолвер
Інший спосіб — написати власний резолвер. Це функція, яка приймає назву компонента і повертає об'єкт з новим ім'ям і місцем для імпорту.
Використання Typescript — увімкніть dts та налаштуйте tsconfig.json :
{
//...
"include": [
// ...
"components.d.ts",
],
"exclude": [
"node_modules"
// components.d.ts не повинно бути в полі exclude
]
//...
}
Ось і все! Повну конфігурацію плагінів можна знайти в документації плагінів. Однак, думаю, цього достатньо, щоб ви швидко розпочали роботу з авто-імпортом у Vue. Дякую за прочитання!
Посилання
[
Авто-імпорти · Концепції Nuxt
Nuxt авто-імпортує компоненти, композиційні функції, допоміжні функції та Vue API.
nuxt.com
](https://nuxt.com/docs/guide/concepts/auto-imports?source=post_page-----3004d97e749a--------------------------------#built-in-auto-imports)
[
GitHub - unplugin/unplugin-auto-import: Авто-імпорт API за запитом для Vite, Webpack та Rollup
Авто-імпорт API за запитом для Vite, Webpack та Rollup - unplugin/unplugin-auto-import
github.com
](https://github.com/unplugin/unplugin-auto-import?source=post_page-----3004d97e749a--------------------------------)
[
GitHub - unplugin/unplugin-vue-components: 📲 Авто-імпорт компонентів за запитом для Vue
📲 Авто-імпорт компонентів за запитом для Vue. Спільний розвиток unplugin/unplugin-vue-components шляхом створення…
github.com
](https://github.com/unplugin/unplugin-vue-components?source=post_page-----3004d97e749a--------------------------------)
🙏 Сподіваюся, що ви щойно прочитали цікаву та корисну статтю.
👏 Якщо вам сподобалося, поставте аплодисменти, мені буде дуже цікаво побачити вашу реакцію!
👆Слідкуйте за мною, щоб першими побачити мої нові статті.
Дякую і удачі, Олександр
Перекладено з: Auto-Import in Vue: Quick Setup Guide