Како структурирати Вуе.јс пројекат

Савршена структура мапе Вуе.јс и архитектура компоненти са паметним и глупим компонентама

Вуе.јс је више од хипета, то је сјајан оквир сучеља. Лако је започети с тим и направити веб апликацију. Вуе.јс се често описује као оквир за мале апликације, а понекад понекад и као алтернатива јКуери-у због његове мале величине! Лично мислим да се може уклопити и у веће пројекте и у овом случају је важно добро структуирати, у смислу архитектуре компоненти.

Пре него што сам покренуо свој први велики пројекат Вуе.јс, урадио сам неко истраживање како бих пронашао савршену структуру мапе, архитектуру компонената и конвенцију именовања. Прегледао сам документацију Вуе.јс, неколико чланака и многе ГитХуб пројекте отвореног кода.

Морао сам пронаћи одговоре на неколико питања која сам имао. То је оно што ћете пронаћи у овом посту:

  • Како структурирате датотеке и мапе унутар пројекта Вуе.јс?
  • Како пишете паметне и глупе компоненте и где их стављате? То је концепт који долази из Реацта.
  • Који су Вуе.јс стил кодирања и најбоље праксе?

Такође ћу документовати са извором за који сам инспирисан и другим везама да бих боље разумео.

Структура мапе Вуе.јс

Овде је садржај срц мапе. Препоручујем вам да започнете пројекат са Вуе ЦЛИ. Лично сам користио подразумевани предложак Вебпацк.

.
├── апп.цсс
├── Апп.вуе
├── имовина
│ └── ...
├── компоненте
│ └── ...
├── маин.јс
├── микинс
│ └── ...
├── усмјеривач
│ └── индек.јс
├── продавница
│ ├── индек.јс
│ ├── модули
│ │ └── ...
│ └── мутација-врсте.јс
├── преводи
│ └── индек.јс
Тил── услужни програми
│ └── ...
└── прикази
    └── ...

Неколико детаља о свакој од ових мапа:

  • средства - где ставите било која средства која се увозе у ваше компоненте
  • компоненте - Све компоненте пројеката које нису главна гледишта
  • микинс - Микинс су делови јавасцрипт кода који се поново користе у различитим компонентама. У микин можете да ставите методе било које компоненте из Вуе.јс, оне ће бити спојене са онима из компоненте која га користи.
  • роутер - Све руте ваших пројеката (у мом случају их имам у индексу.јс). У основи у Вуе.јс све је компонента. Али није све страница. На страници се налази рута попут „/ контролна табла“, „/ подешавања“ или „/ претрага“. Ако компонента има руту, она се преусмерава.
  • похрањивање (изборно) - Вуек константе у мутатион-типе.јс, Вуек модули у модулима подмапе (који се затим учитавају у индек.јс).
  • преводи (опционо) - Лоцалес датотеке, користим Вуе-и18н, и делује прилично добро.
  • утилс (опционо) - Функције које користим у неким компонентама, као што су тестирање регуларне вредности, константе или филтери.
  • прикази - Да би пројекат брже прочитао, одвајам компоненте које су преусмерене и стављам их у ову мапу. Компоненте које су преусмерене за мене су више од компоненте, јер представљају странице и имају руте, стављам их у „приказе“, а затим када проверите страницу идете у ову мапу.

На крају можете додати и друге мапе, овисно о вашим потребама, попут филтера или константи, АПИ-ја.

Неки ресурси су ме инспирисали

  • хттпс://вуек.вуејс.орг/ен/струцтуре.хтмл
  • хттпс://гитхуб.цом/вуејс/вуе-хацкерневс-2.0/трее/мастер/срц
  • хттпс://гитхуб.цом/мцхандлераз/реалворлд-вуе/трее/мастер/срц

Паметне у односу на глупе компоненте са Вуе.јс

Паметне и глупе компоненте је концепт који сам научио од Реацт-а. Паметне компоненте се називају и контејнери, они су ти који управљају промјенама стања, они су одговорни за то како ствари функционишу. Супротно томе, глупе компоненте, које се још зову и презентацијске, само управљају изгледом и осећајем.

Ако сте упознати са МВЦ узорком, можете упоређивати деумп компоненте са Виев и паметне компоненте са Цонтроллер-ом!

У Реацт паметне и глупе компоненте се обично стављају у различите фасцикле, док их у Вуе.јс све стављате у исту мапу: компоненте. За разликовање у Вуе.јс користићете конвенцију о именовању. Рецимо да имате глупу компоненту картице, тада би требало да користите једно од ових имена:

  • БасеЦард
  • АппЦард
  • ВЦард

Ако имате паметну компоненту која користи БасеЦард и додаје јој неке методе, можете је, на пример, именовати, у зависности од вашег пројекта:

  • ПрофилеЦард
  • ИтемЦард
  • НевсЦард

Ако ваша паметна компонента није само паметнија БасеЦард картица са методама, користите било које име које одговара вашој компоненти и без започињања са Басе (или Апп или В), на пример:

  • ДасхбоардСтатистицс
  • Резултати претраге
  • Профил корисника

Ова конвенција о именовању долази из Вуе.јс службеног водича стилова који такође садржи конвенције о именовању!

Именовања конвенције

Ево неколико конвенција које стижу из званичног Вуе.јс стилског водича које морате добро да структуишете свој пројекат:

  • Имена компоненти увек би требало да буду више речи, осим коријенских компоненти „Апп“. Користите, на пример, „УсерЦард“ или „ПрофилеЦард“ уместо „Цард“.
  • Свака компонента треба бити у својој датотеци.
  • Називи компоненти са једном датотеком треба да буду увек ПасцалЦасе или увек кебаб. Користите „УсерЦард.вуе“ или „усер-цард.вуе“.
  • Компоненте које се користе само једном по страници требају почети префиксом „Тхе“, да означи да може бити само један. На пример, за навбар или подножје треба да користите „ТхеНавбар.вуе“ или „ТхеФоотер.вуе“.
  • Дијете компоненте требају садржавати име свог родитеља као префикс. На пример, ако желите компоненту „Пхото“ која се користи у „УсерЦард“ именућете је „УсерЦардПхото“. Боља је читљивост јер се датотеке у мапи обично редоследе по абецеди.
  • У називу компоненти увек користите полно име уместо скраћенице. На пример, не користите „УДСеттингс“, уместо тога користите „УсерДасхбоардСеттингс“.

Вуе.јс званичан стилски водич

Без обзира да ли сте напредни или почетник са Вуе.јс, требало би да прочитате овај Вуе.јс стилски водич, садржи пуно савета и такође именовања конвенција. Садржи пуно примера ствари које треба урадити а не урадити.

Ако вам се свидела ова објава, кликните неколико пута на дугме пљескајући како бисте показали своју подршку! Такође, слободно коментаришите и дајте било какве повратне информације. Не заборавите да ме пратите!

Желите да видите још оваквих чланака? Подржи ме на Патреону