Vue Academy · Lekcja

Skalowalna struktura folderów

Organizowanie dużych projektów Vue z myślą o łatwym utrzymaniu.

Skalowalna struktura folderów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Struktura ma znaczenie

Gdy aplikacja Vue rozrasta się ponad kilka plików, sposób jej organizacji decyduje o tym, jak łatwo można się w niej poruszać, utrzymywać ją i wdrażać nowych programistów. Dobra struktura skaluje się razem z projektem, a chaotyczna spowalnia pracę wszystkich.

Organizacja według typu

Podejście według typu grupuje pliki na podstawie tego, czym są: wszystkie komponenty znajdują się razem, podobnie jak wszystkie widoki i store'y. Jest proste i dobrze sprawdza się w małych oraz średnich aplikacjach.

src/
  components/
  views/
  stores/
  composables/
  router/

Organizacja według funkcji

Podejście według funkcji grupuje pliki zgodnie z funkcją, do której należą. Wszystko, co dotyczy funkcji uwierzytelniania, znajduje się w jednym folderze, dzięki czemu duże aplikacje są łatwiejsze do zrozumienia.

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

Wybór podejścia

Organizacja według typu świetnie sprawdza się w mniejszych aplikacjach. Gdy aplikacja rośnie i przybywa funkcji, organizacja według funkcji pozwala przechowywać powiązany kod razem i ogranicza konieczność przechodzenia między folderami. Wiele zespołów zaczyna od organizacji według typu, a następnie przechodzi na inne podejście wraz ze skalowaniem projektu.

Rozdzielanie widoków i komponentów

Należy rozróżniać widoki (komponenty na poziomie stron, obsługiwane przez routing) od komponentów (wielokrotnego użytku, stanowiących elementy składowe interfejsu). Taki podział jasno pokazuje, które elementy mogą być obsługiwane przez routing, a które są współdzielone.

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

Organizacja composables

Wielokrotnego użytku logikę Composition API należy przechowywać w folderze composables. Nazwy z prefiksem use od razu wskazują ich przeznaczenie.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

Organizacja store'ów

Globalne store'y stanu należy umieścić w folderze stores, po jednym pliku dla każdej domeny. Dzięki temu zarządzanie stanem jest łatwe do odnalezienia i modułowe.

stores/
  user.js
  cart.js
  settings.js

Konwencje nazewnicze

Spójność ogranicza niepotrzebne utrudnienia. Dla plików komponentów należy stosować PascalCase, podstawowe komponenty poprzedzać prefiksem Base, a także używać nazw wielowyrazowych, aby uniknąć konfliktów z elementami HTML.

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

Eksporty barrel

Barrel to plik index.js, który ponownie eksportuje zawartość folderu, dzięki czemu importy odbywają się z jednej ścieżki zamiast z wielu.

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

Importowanie z pliku barrel

Dzięki plikowi barrel wiele importów można połączyć w jeden przejrzysty wiersz, co poprawia czytelność.

import { useAuth, useFetch } from "@/composables"

Zachowanie spójności

Niezależnie od wybranej struktury należy stosować ją konsekwentnie i opisać w pliku README projektu. Najlepsza struktura to taka, którą cały zespół rozumie i stosuje. Wraz z rozwojem aplikacji warto przeprowadzać refaktoryzację w kierunku organizacji według funkcji.

Szybki test

Sprawdź swoją wiedzę o strukturze folderów.

Podsumowanie

Mniejsze aplikacje należy organizować według typu, a wraz ze skalowaniem projektu — według funkcji. Warto oddzielać obsługiwane przez routing widoki od wielokrotnego użytku komponentów, przechowywać composables i store'y w osobnych folderach, stosować spójne nazewnictwo oraz używać eksportów barrel dla przejrzystych importów. To właśnie spójność, udokumentowana dla całego zespołu, sprawia, że struktura naprawdę dobrze się skaluje.

Często zadawane pytania

Czy lekcja „Skalowalna struktura folderów” jest bezpłatna?

Tak — pełny tekst „Skalowalna struktura folderów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Skalowalna struktura folderów”?

Organizowanie dużych projektów Vue z myślą o łatwym utrzymaniu. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Skalowalna struktura folderów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy