Як зазначено в заголовку, ця стаття присвячена організації структури папок вашого додатка на Vue. Але чи це важливо? І оскільки Vue вже надає стандартну структуру папок, чому ж ми повинні заглиблюватися в це? Це цілком обґрунтовані питання.
Так, структура папок має значення, і хоча стандартна структура Vue добре працює, є кілька ключових аспектів, які варто врахувати, особливо з огляду на масштабованість.
Принцип передбачуваності є надзвичайно важливим при розробці будь-якого фронтенд або бекенд додатка. Спочатку ваш додаток, ймовірно, буде невеликим і легким для управління. Але коли ваш проект зросте, може стати важко знаходити окремі частини коду, якщо структура не є чіткою. Саме тут передбачуваність стає необхідною.
Передбачувана і добре організована структура папок полегшує навігацію і управління вашим кодом, коли проект розростається.
Без цього ви можете витратити багато часу на пошук файлів або боротися з несумісностями, коли ваш додаток росте.
Це поточна структура папок мого додатка на Vue.
Поточна структура папок мого додатка на Vue
Зображення вище показує структуру папок мого поточного додатка. Оскільки це активний проект, я не можу розкрити назву клієнта або проекту. Однак, як ви можете побачити, на рівні батьківської папки є багато папок. Варто зазначити, що не всі ці папки є необхідними для кожного додатка.
Нижче я підготував список з короткими описами обов'язкових папок, які повинні бути включені, та необов'язкових папок, які можна додати за потреби. Зараз я зосереджусь на структурі папок на рівні батьківської папки. Структура вкладених папок буде обговорена пізніше.
src містить основний код додатка.
Структура виглядає наступним чином:**
Огляд папки src (обов'язкові)
assets/:
Містить статичні файли, такі як зображення, шрифти або глобальні стилі (наприклад, CSS, SCSS).
Використовуйте для ресурсів, які не належать до конкретної функціональності.
components/:
Містить повторно використовувані, загальні компоненти (наприклад, кнопки, модальні вікна, картки).
Ці компоненти повинні бути незалежними від конкретної функціональності в малих проектах, але для великих проектів ви можете організувати їх, використовуючи структуровану систему файлів і папок.
composables/:
Містить повторно використовувану логіку за допомогою Composition API у Vue 3.
Чудово підходить для спільного використання логіки, наприклад, для отримання даних або обробки форм без дублювання коду.
layouts/:
Визначає повторно використовувані макети, такі як заголовки, футери або бічні панелі.
router/:
Керує конфігурацією маршрутизації додатка.
Визначає, який компонент або вигляд відображається для кожної URL.
store/:
Містить логіку управління станом (якщо використовується Pinia або Vuex).
Організує глобальний стан додатка та пов'язані дії/мутації.
types/:
Містить інтерфейси TypeScript або визначення типів.
utils/:
Включає допоміжні функції або утиліти (наприклад, форматування дат, обчислення).
Залишайте це загальним і незалежним від Vue.
Папки types та utils є такими, які я вважаю обов'язковими для включення.
У довгостроковій перспективі, коли ваш проект зростатиме, масштабованість завжди буде важливим питанням, і дотримання найкращих практик — це те, чому кожен розробник повинен приділяти увагу.
Зараз TypeScript широко використовується майже у всіх фреймворках, будь то Vue, Angular чи React. Тому краще керувати TypeScript у масштабованому та організованому вигляді.
Папка utils, з іншого боку, містить звичайні файли JavaScript або TypeScript з повторно використовуваною логікою, яка не пов'язана з конкретним станом або екосистемою Vue та її життєвим циклом. Наприклад, допоміжні функції, як форматування дат або певні обчислення, можуть зберігатися в папці utils. Це допомагає підтримувати чисте розмежування обов'язків і забезпечує повторне використання.
Огляд папки src (необов'язкові)
config/:
Містить конфігураційні значення для конкретних функцій. Для обмежених та глобальних налаштувань найкраще використовувати .env для зберігання конфігурацій.
constants/:
Містить постійні значення у вигляді тексту чи чисел.
поєднання обох або пара "ключ-значення".
plugins/:
Ідеально, папка
pluginsне є частиною стандартної структури папок Vue, але вона була додана для конкретної мети.Якщо ви пам'ятаєте, в Vue 2 існувала концепція фільтрів. Ці фільтри використовувалися як форматери для завдань, таких як форматування тексту, форматування цін та інші перетворення значень.
У Vue 3 фільтри були повністю видалені, незалежно від того, чи використовуєте ви Options API чи Composition API. Однак, якщо ви все ще хочете використовувати фільтри в додатку на глобальному рівні, папка
pluginsможе служити точкою входу для їх налаштування.Налаштовуючи фільтри глобально, вони стають "автоматично імпортованими", тому вам не потрібно вручну імпортувати їх у кожному файлі, де ви хочете їх використовувати.
Це спрощує реалізацію та забезпечує узгодженість по всьому додатку.
Щодо структури вкладених папок, основна увага буде зосереджена на папці components, де правильна структура є важливою. Для інших папок розуміння основних стандартних практик зазвичай достатньо.
Сподіваюся, ця стаття допоможе вам ефективно масштабувати ваш додаток у міру його зростання та роз'яснить будь-які труднощі, з якими можуть зіткнутися розробники на пізніших етапах розробки. Якщо ви знайшли цю статтю корисною, будь ласка, не забудьте поставити "клап". Якщо у вас є питання або вам потрібне додаткове роз'яснення щодо структури папок або чогось, що стосується Vue, не соромтеся залишити коментар — ми обов'язково обговоримо це!
Перекладено з: How Should Your Vue Application Folder Structure Look?