Як структураваць праект Vue.js

Ідэальная структура папак і архітэктура кампанентаў Vue.js з разумнымі і дурнымі кампанентамі

Vue.js - гэта больш, чым шуміха, выдатны фронт-фрэймворк. Пачаць працу і стварыць вэб-дадатак нескладана. Vue.js часта апісваюць як аснову для невялікіх прыкладанняў, а часам нават як альтэрнатыву jQuery, бо ён вельмі маленькі! Асабіста я думаю, што гэта падыходзіць і для вялікіх праектаў. У гэтым выпадку важна добра яго структураваць з пункту гледжання архітэктуры кампанентаў.

Перш чым пачаць свой першы вялікі праект Vue.js, я правёў некалькі даследаванняў, каб знайсці ідэальную структуру тэчак, архітэктуру кампанентаў і правілы наймення. Я прагледзеў дакументацыю Vue.js, некаторыя артыкулы і мноства праектаў з адкрытым зыходным кодам GitHub.

Мне давялося знайсці адказы на некаторыя пытанні. Вы можаце знайсці гэта ў гэтым паведамленні:

  • Як структураваць файлы і тэчкі ў праекце Vue.js?
  • Як вы пішаце разумныя і нямыя кампаненты і дзе іх размяшчаеце? Гэта канцэпцыя ад React.
  • Якія стылі і лепшыя практыкі кадавання Vue.j?

Для лепшага разумення я буду таксама дакументаваць крыніцу, на якую мяне натхніла, і іншыя спасылкі.

Структура папак Vue.js.

Тут змесціва папкі src. Я рэкамендую вам пачаць праект з Vue CLI. Асабіста я выкарыстаў стандартны шаблон webpack.

. ├── app.css ├── App.vue ├── Актывы │ │ ... ├── Кампаненты │ │ ... ├── main.js ├── міксіны │ │ ... ├── Маршрутызатар │ └── index.js ├── захаваць │ ├── index.js │ ├── модулі │ │ └── ... │ │ mutation-types.js ├── пераклады │ └── index.js ├─ ─ Посуд │ │ ... └── Прагляды └── ...

Некалькі звестак пра кожную з гэтых папак:

  • Актывы - тут вы кладзеце ўсе актывы, якія будуць імпартаваны ў вашыя кампаненты
  • Кампаненты - усе кампаненты праектаў, якія не з'яўляюцца асноўнымі поглядамі
  • міксіны - міксіны - гэта фрагменты кода Javascript, якія паўторна выкарыстоўваюцца ў розных кампанентах. У міксін вы можаце ўставіць метады кожнага кампанента з Vue.js. Яны аб'яднаны з кампанентам, які іх выкарыстоўвае.
  • маршрутызатар - Усе маршруты вашых праектаў (у маім выпадку яны ёсць у index.js). У асноўным усё ў Vue.js з'яўляецца кампанентам. Але не ўсё адзін бок. На старонцы ёсць такі маршрут, як "/ прыборная панэль", "/ налады" альбо "/ пошук". Калі ў кампанента ёсць маршрут, ён перасылаецца.
  • крама (неабавязкова) - канстанты Vuex у mutation-type.js, модулі Vuex у модулях падтэчкі (якія потым загружаюцца ў index.js).
  • Пераклады (неабавязкова) - Мясцовыя файлы, я выкарыстоўваю Vue-i18n, і гэта працуе даволі добра.
  • utils (неабавязкова) - функцыі, якія я выкарыстоўваю ў некаторых кампанентах, напрыклад B. Выпрабавальныя тэсты, канстанты або фільтры.
  • Прагляды - Для палягчэння чытання праекта я аддзялю маршрутызаваныя кампаненты і змяшчаю іх у гэтую тэчку. Кампаненты, якія накіроўваюцца для мяне, - гэта не проста кампанент, таму што яны ўяўляюць старонкі і маюць маршруты. Затым я змясціў іх у "Прагляды", калі вы праглядаеце старонку, пераключайцеся ў гэтую тэчку.

Па меры неабходнасці вы можаце дадаць іншыя тэчкі, напрыклад B. Фільтры альбо канстанты, 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, вы можаце параўнаць кампаненты рэзервовага капіявання з выглядам і разумныя кампаненты з кантролерам!

У React разумныя і нямыя кампаненты звычайна змяшчаюцца ў розныя папкі, а ў Vue.js вы змяшчаеце іх у адну тэчку: кампаненты. Выкарыстоўвайце канвенцыю аб найменнях для дыферэнцыяцыі ў Vue.js. Дапусцім, у вас дурны складнік карты. Тады вы павінны выкарыстоўваць адно з наступных імёнаў:

  • BaseCard
  • AppCard
  • VCard

Калі ў вас ёсць разумны кампанент, які выкарыстоўвае BaseCard і дадае да яго некаторыя метады, вы можаце назваць яго ў залежнасці ад вашага праекта, напрыклад:

  • ProfileCard
  • ItemCard
  • Карты навін

Калі ваш разумны кампанент не проста "разумнейшы" BaseCard з метадамі, проста выкарыстоўвайце любое імя, якое адпавядае вашаму кампаненту, не пачынаючы з Base (альбо прыкладання альбо V). Прыклад:

  • Статыстыка прыборнай панэлі
  • Вынікі пошуку
  • Профіль карыстальніка

Гэта канвенцыя аб найменнях паходзіць з афіцыйнага кіраўніцтва па стылі ад Vue.j, якое таксама ўтрымлівае канвенцыі пра найменні!

Правілы наймення

Вось некалькі ўмоў з афіцыйнага кіраўніцтва па стылі Vue.j, якія вам патрэбныя, каб добра арганізаваць свой праект:

  • Імёны кампанентаў заўсёды павінны складацца з некалькіх слоў, за выключэннем каранёвых кампанентаў прыкладання. Напрыклад, выкарыстоўвайце "UserCard" альбо "ProfileCard" замест "Card".
  • Кожны кампанент павінен знаходзіцца ў сваім файле.
  • Імёны файлаў кампанентаў, якія складаюцца з аднаго файла, заўсёды павінны быць PascalCase альбо заўсёды Kebab-case. Выкарыстоўвайце "UserCard.vue" альбо "user-card.vue".
  • Кампаненты, якія выкарыстоўваюцца толькі адзін раз на баку, павінны пачынацца з прэфікса "The", каб паказаць, што іх можа быць толькі адзін. Напрыклад, для панэлі навігацыі або ніжняга калонтытула выкарыстоўвайце TheNavbar.vue або TheFooter.vue.
  • Даччыныя кампаненты павінны прэфіксаваць імя бацькоў. Напрыклад, калі вы хочаце выкарыстоўваць кампанент "Фота" у "Картцы карыстальніка", назавіце яго "UserCardPhoto". Гэта для лепшай чытальнасці, бо файлы ў тэчцы звычайна адсартаваны па алфавіце.
  • Заўсёды выкарыстоўвайце поўнае імя замест абрэвіятуры ў назве кампанентаў. Напрыклад, выкарыстоўвайце не "UDSettings", а "UserDashboardSettings".

Афіцыйны даведнік па стылі Vue.js

Калі вы прасунуліся ў Vue.js ці пачатковец, гэта кіраўніцтва па стылі Vue.js варта прачытаць. Ён утрымлівае мноства парад, а таксама правілы наймення. У ім шмат прыкладаў таго, што трэба рабіць, а чаго не рабіць.

Калі вам спадабаўся гэты пост, калі ласка, націсніце кнопку плётак некалькі разоў, каб паказаць сваю падтрымку! Акрамя таго, не саромейцеся каментаваць і даваць любыя водгукі. Не забудзьцеся пайсці за мной!

Хочаце ўбачыць больш падобных прадметаў? Падтрымайце мяне на Patreon