Jak zbudować projekt Vue.js

Idealna struktura folderów Vue.js i architektura komponentów z inteligentnymi i głupimi komponentami

Vue.js to coś więcej niż szum, to świetny framework frontendowy. Rozpoczęcie korzystania z niego i zbudowanie aplikacji internetowej jest dość łatwe. Vue.js jest często opisywany jako framework dla małych aplikacji, a czasem jako alternatywa dla jQuery ze względu na jego mały rozmiar! Osobiście uważam, że może on również pasować do większych projektów i w tym przypadku ważne jest, aby dobrze go ustrukturyzować pod względem architektury komponentów.

Przed rozpoczęciem mojego pierwszego dużego projektu Vue.js przeprowadziłem badania w celu znalezienia idealnej struktury folderów, architektury komponentów i konwencji nazewnictwa. Przejrzałem dokumentację Vue.js, kilka artykułów i wiele projektów GitHub typu open source.

Musiałem znaleźć odpowiedzi na kilka moich pytań. Oto, co znajdziesz w tym poście:

  • Jak strukturyzujesz pliki i foldery w projekcie Vue.js?
  • Jak piszesz komponenty Smart i Dumb i gdzie je umieszczasz? To koncepcja pochodząca z React.
  • Jaki jest styl kodowania i najlepsze praktyki Vue.js?

Będę również dokumentować ze źródłem, które mnie zainspirowało i innymi linkami, aby uzyskać lepsze zrozumienie.

Struktura folderów Vue.js

Oto zawartość folderu src. Polecam rozpocząć projekt od Vue CLI. Osobiście użyłem domyślnego szablonu pakietu Webpack.

.
├── app.css
├── App.vue
├── aktywa
│ └── ...
├── elementy
│ └── ...
├── main.js
├── mixiny
│ └── ...
├── router
.J └── index.js
├── sklep
.J ├── index.js
│ ├── moduły
│ │ └── ...
└── └── mutation-types.js
├── tłumaczenia
.J └── index.js
├── Utils
│ └── ...
└── widoki
    └── ...

Kilka szczegółów na temat każdego z tych folderów:

  • zasoby - gdzie umieszczasz dowolne zasoby, które są importowane do twoich komponentów
  • komponenty - wszystkie komponenty projektów, które nie są głównymi widokami
  • mixins - mixiny to części kodu javascript, który jest ponownie wykorzystywany w różnych komponentach. W mixinie możesz umieścić metody dowolnego komponentu z Vue.js, które zostaną scalone z metodami komponentu, który go używa.
  • router - Wszystkie trasy twoich projektów (w moim przypadku mam je w pliku index.js). Zasadniczo w Vue.js wszystko jest składnikiem. Ale nie wszystko jest stroną. Strona ma trasę taką jak „/ dashboard”, „/ settings” lub „/ search”. Jeśli komponent ma trasę, jest trasowany.
  • store (opcjonalnie) - Stałe Vuex w mutation-type.js, moduły Vuex w modułach podfolderów (które następnie są ładowane do index.js).
  • tłumaczenia (opcjonalnie) - Pliki Locales, używam Vue-i18n i działa całkiem dobrze.
  • utils (opcjonalnie) - Funkcje, których używam w niektórych komponentach, takie jak testowanie wartości wyrażenia regularnego, stałe lub filtry.
  • widoki - aby przyspieszyć czytanie projektu, oddzielam kierowane komponenty i umieszczam je w tym folderze. Komponenty, które są dla mnie przekierowywane, są czymś więcej niż komponentem, ponieważ reprezentują strony i mają trasy, umieszczam je w „widokach”, a następnie, gdy sprawdzasz stronę, wchodzisz do tego folderu.

Możesz ostatecznie dodać inne foldery w zależności od potrzeb, takie jak filtry lub stałe API.

Niektóre zasoby zainspirowały mnie

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Inteligentne kontra głupie komponenty z Vue.js

Inteligentne i głupie elementy to koncepcja, której nauczyłem się od React. Inteligentne komponenty są również nazywane kontenerami, to one obsługują zmiany stanu, są odpowiedzialne za to, jak działają rzeczy. Wręcz przeciwnie, głupie elementy, zwane także prezentacyjnymi, obsługują tylko wygląd.

Jeśli znasz wzór MVC, możesz porównać komponenty zrzutu do widoku i komponenty inteligentne z kontrolerem!

W React inteligentne i głupie komponenty są zwykle umieszczane w różnych folderach, podczas gdy w Vue.js umieszczasz je wszystkie w tym samym folderze: komponenty. Aby odróżnić w Vue.js, użyjesz konwencji nazewnictwa. Załóżmy, że masz głupi element karty, a następnie powinieneś użyć jednej z tych nazw:

  • BaseCard
  • AppCard
  • VCard

Jeśli masz inteligentny komponent, który korzysta z BaseCard i dodaje do niego kilka metod, możesz na przykład nazwać go w zależności od projektu:

  • ProfileCard
  • ItemCard
  • NewsCard

Jeśli Twój inteligentny komponent to nie tylko „inteligentniejsza” karta bazowa z metodami, po prostu użyj dowolnej nazwy, która pasuje do twojego komponentu i bez rozpoczynania od Base (lub App lub V), na przykład:

  • DashboardStatistics
  • SearchResults
  • Profil użytkownika

Ta konwencja nazewnictwa pochodzi z oficjalnego przewodnika po stylach Vue.js, który zawiera także konwencje nazewnictwa!

Konwencje nazewnictwa

Oto kilka konwencji pochodzących z oficjalnego przewodnika po stylach Vue.js, które musisz dobrze ustrukturyzować w swoim projekcie:

  • Nazwy składników powinny zawsze składać się z wielu słów, z wyjątkiem głównych składników „App”. Użyj na przykład „UserCard” lub „ProfileCard” zamiast „Card”.
  • Każdy składnik powinien znajdować się we własnym pliku.
  • Nazwy plików składników zawierających jeden plik powinny być zawsze PascalCase lub zawsze kebab-case. Użyj „UserCard.vue” lub „user-card.vue”.
  • Komponenty używane tylko raz na stronie powinny zaczynać się od przedrostka „The”, co oznacza, że ​​może być tylko jeden. Na przykład w przypadku paska nawigacyjnego lub stopki należy użyć „TheNavbar.vue” lub „TheFooter.vue”.
  • Komponenty potomne powinny zawierać ich nazwę rodzica jako prefiks. Na przykład, jeśli chcesz użyć komponentu „Photo” użytego w „UserCard”, nadasz mu nazwę „UserCardPhoto”. Ma to na celu lepszą czytelność, ponieważ pliki w folderze są zwykle uporządkowane alfabetycznie.
  • Zawsze używaj pełnej nazwy zamiast skrótu w nazwie swoich komponentów. Na przykład nie używaj „UDSettings”, zamiast tego użyj „UserDashboardSettings”.

Oficjalny przewodnik po stylach Vue.js

Niezależnie od tego, czy jesteś zaawansowanym czy początkującym użytkownikiem Vue.js, powinieneś przeczytać ten poradnik stylistyki Vue.js, zawiera on wiele wskazówek, a także konwencje nazewnictwa. Zawiera wiele przykładów rzeczy do zrobienia, a nie do zrobienia.

Jeśli podobał Ci się ten post, kliknij kilka razy przycisk ap poniżej, aby pokazać swoje poparcie! Możesz również komentować i udzielać wszelkich informacji zwrotnych. Nie zapomnij iść za mną!

Chcesz zobaczyć więcej artykułów takich jak ten? Wesprzyj mnie na Patreon