Как да структурираме Vue.js проект

Перфектната структура на папки Vue.js и архитектура на компоненти с интелигентни и тъпи компоненти

Vue.js е нещо повече от свръх, това е чудесна рамка за фронтовите. Доста лесно е да започнете с него и да създадете уеб приложение. Vue.js често се описва като рамка за малки приложения и дори понякога като алтернатива на jQuery поради малкия си размер! Аз лично смятам, че той може да се побере и за по-големи проекти и в този случай е важно да го структурирате добре по отношение на архитектурата на компонентите.

Преди да започна първия си голям проект Vue.js, направих някои проучвания, за да намеря перфектната структура на папките, архитектурата на компонентите и конвенцията за именуване. Преминах документацията на Vue.js, няколко статии и много проекти с отворен код на GitHub.

Трябваше да намеря отговорите на няколко въпроса, които имах. Това ще намерите в тази публикация:

  • Как структурирате файловете и папките в проекта Vue.js?
  • Как пишете Smart и Dumb компоненти и къде ги поставяте? Това е концепция, идваща от React.
  • Какви са Vue.js стил на кодиране и най-добри практики?

Ще документирам и източника, от който се вдъхнових, и други връзки, за да разбера по-добре.

Структура на папките Vue.js

Ето съдържанието на папката src. Препоръчвам ви да започнете проекта с Vue CLI. Аз лично използвах шаблона на Webpack по подразбиране.

,
├── app.css
├── App.vue
├── активи
│ └── ...
├── компоненти
│ └── ...
├── main.js
├── миксини
│ └── ...
├── рутер
│ └── index.js
├── магазин
│ ├── index.js
│ ├── модули
│ │ └── ...
│ └── mutation-types.js
├── преводи
│ └── index.js
├── полезни програми
│ └── ...
└── мнения
    └── ...

Няколко подробности за всяка от тези папки:

  • активи - където поставяте активи, които се внасят във вашите компоненти
  • компоненти - Всички компоненти на проектите, които не са основните мнения
  • mixins - Миксините са частите от JavaScript кода, който се използва повторно в различни компоненти. В mixin можете да поставите методите на всеки компонент от Vue.js, те ще бъдат слети с методите на компонента, който го използва.
  • рутер - Всички маршрути на вашите проекти (в моя случай ги имам в index.js). По принцип във Vue.js всичко е компонент. Но не всичко е страница. Страницата има маршрут като „/ табло“, „/ настройки“ или „/ търсене“. Ако компонент има маршрут, той се маршрутизира.
  • съхраняване (незадължително) - константите Vuex в mutation-type.js, Vuex модулите в модулите на папката (които след това се зареждат в index.js).
  • преводи (по избор) - Локални файлове, използвам Vue-i18n и работи доста добре.
  • utils (незадължително) - Функции, които използвам в някои компоненти, като например тестване на стойности за регекс, константи или филтри.
  • изгледи - За да направя проекта по-бърз за четене Разделям компонентите, които са маршрутизирани и ги поставя в тази папка. Компонентите, които са насочени към мен, са повече от компонент, тъй като те представляват страници и имат маршрути, аз ги поставям в „изгледи“, тогава когато проверявате страница, отивате в тази папка.

В крайна сметка можете да добавите други папки в зависимост от вашите нужди, като например филтри или константи, API.

Някои ресурси ме вдъхновиха

  • 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

Смарт срещу тъпи компоненти с Vue.js

Умните и тъпи компоненти са концепция, която научих от React. Умните компоненти също се наричат ​​контейнери, те са тези, които се справят с промените в състоянието, те са отговорни за това как работят нещата. Напротив, тъпите компоненти, наричани още презентационни, се справят само с външния вид и усещането.

Ако сте запознати с MVC модела, можете да сравните демпф компоненти на View и интелигентни компоненти с контролера!

В React умните и тъпи компоненти обикновено се поставят в различни папки, докато във Vue.js ги поставяте в една и съща папка: компоненти. За да разграничите Vue.js, ще използвате конвенция за именуване. Да речем, че имате тъп компонент на картата, тогава трябва да използвате едно от тези имена:

  • BaseCard
  • AppCard
  • Бизнес картичка

Ако имате интелигентен компонент, който използва BaseCard и добавя към него някои методи, можете например да го назовите, в зависимост от вашия проект:

  • ProfileCard
  • ItemCard
  • NewsCard

Ако вашият интелигентен компонент не е само „по-интелигентна” BaseCard с методи, просто използвайте всяко име, което пасва на вашия компонент и без да започвате с Base (или приложение, или V), например:

  • DashboardStatistics
  • Резултати от търсенето
  • Userprofile

Това споразумение за именуване идва от официалния стилгид на Vue.js, който също съдържа конвенции за именуване!

Именуване на конвенции

Ето няколко конвенции, идващи от официалния стилгид на Vue.js, който трябва да структурирате добре своя проект:

  • Имената на компонентите трябва винаги да са многословни, с изключение на коренните „App“ компоненти. Използвайте например „UserCard“ или „ProfileCard“ вместо „Card“.
  • Всеки компонент трябва да бъде в собствен файл.
  • Имената на файловете на еднофайлови компоненти трябва да бъдат винаги PascalCase или винаги с кебаб. Използвайте „UserCard.vue“ или „user-card.vue“.
  • Компонентите, които се използват само веднъж на страница, трябва да започват с префикса „The“, за да обозначат, че може да има само един. Например за навигация или долен колонтитул трябва да използвате „TheNavbar.vue“ или „TheFooter.vue“.
  • Частните компоненти трябва да включват името на родителя си като префикс. Например, ако искате компонент „Photo“, използван в „UserCard“, ще го наречете „UserCardPhoto“. Това е за по-добра четимост, тъй като файловете в папка обикновено се подреждат по азбучен ред.
  • Винаги използвайте пълно име вместо съкращение в името на вашите компоненти. Например не използвайте „UDSettings“, вместо това използвайте „UserDashboardSettings“.

Vue.js официален стилгид

Независимо дали сте напреднал или начинаещ с Vue.js, трябва да прочетете този Vue.js styleguide, той съдържа много съвети и също така да назовавате конвенции. Той съдържа много примери за неща, които трябва да се правят, а не да се правят.

Ако тази публикация ви е харесала, моля, щракнете бутона бутон cla бутона няколко пъти, за да покажете вашата подкрепа! Освен това, не се колебайте да коментирате и давате всякакъв вид отзиви. Не забравяйте да ме последвате!

Искате ли да видите още статии като тази? Подкрепете ме в Patreon