Vue.js долбоорун кантип түзүүгө болот

Vue.js папкасынын мыкты түзүлүшү жана архитектурасы интеллектуалдык жана акылсыз компоненттери менен

Hue-ден тышкары, Vue.js - бул эң алдыңкы алкак. Веб колдонмону түзүп баштоо оңой. Vue.js көбүнчө кичинекей колдонмолордун алкагы катары мүнөздөлөт, кээде jQuery'ге альтернатива катары колдонулат, анткени бул өтө кичинекей! Жеке менин оюмча, бул ири долбоорлорго да ылайыктуу. Бул учурда, аны компоненттик архитектура жагынан жакшы структуралоо маанилүү.

Биринчи чоң Vue.js долбоорумду баштаардан мурун, мен папканын мыкты структурасын, компоненттеринин архитектурасын жана ат коюу конвенциясын табуу үчүн бир нече изилдөө жүргүздүм. Мен Vue.js документацияларын, айрым макалаларын жана көптөгөн GitHub ачык булактуу долбоорлорун карап чыктым.

Кээ бир суроолорума жооп издешим керек болчу. Бул билдирүүдөн таба аласыз:

  • Vue.js долбоорундагы файлдарды жана папкаларды кантип түзөсүз?
  • Акылдуу жана дудук компоненттерди кантип жазасыз жана аларды кайда жайгаштырасыз? Бул React компаниясынын түшүнүгү.
  • Vue.j коддоо стили жана мыкты тажрыйбалары кандай?

Жакшыраак түшүнүү үчүн, рухтун жетеги менен жазылган булак жана башка шилтемелер менен документтештирем.

Vue.js папкасынын түзүлүшү

Бул жерде src папкасынын мазмуну келтирилген. Долбоорду Vue CLIден баштоону сунуштайм. Жеке мен стандарттык веб-пакет шаблонун колдондум.

. ├── app.css ├── App.vue ├── Assets │ │ ... ├── Компоненттер │ │ ... ├── main.js ├── миксиндер │ │ ... ├── Роутер │ └── index.js ├── сактоо ├── ├── index.js │ ├── модулдар │ │ └── ... │ │ mutation-types.js ├── котормолор │ └── index.js ├─ ─ Идиштер ... └── Көрүүлөр └── ...

Бул папкалардын ар бири жөнүндө айрым маалыматтар:

  • Активдер - Бул жерде сиз компоненттериңизге импорттолуучу бардык мүлктөрдү саласыз
  • Компоненттер - Долбоордун негизги көз караштары болбогон бардык компоненттери
  • миксиндер - Ар кандай компоненттерде кайрадан колдонулган Javascript кодунун бөлүктөрү. Миксинде ар бир компоненттин ыкмаларын Vue.js. сайтынан кошо аласыз. Алар аларды колдонгон компонент менен бириктирилген.
  • роутер - Сиздин долбоорлоруңуздун бардык маршруттары (менин жагдайымда, аларды index.js-де бар). Негизинен Vue.js-деги бардык нерсе компонент. Бирок баардыгы бир тараптуу эмес. Баракчанын "/ dashboard", "/ settings" же "/ search" сыяктуу маршруту бар. Эгерде компоненттин маршруту бар болсо, анда ал багытталат.
  • дүкөн (милдеттүү эмес) - Мутациялык типтеги Vuex туруктуулары, суб-папканын модулдарындагы Vuex модулдары (андан кийин index.js-ге жүктөлөт).
  • Котормолор (милдеттүү эмес) - Файлдардын жергиликтүү тилин, мен Vue-i18n колдонуп жатам, ал жакшы иштейт.
  • утилиттер (милдеттүү эмес) - кээ бир компоненттерде колдонгон функциялар, мис. B. Regex мааниси тесттери, туруктуу же чыпкалар.
  • Көрүүлөр - Долбоорду окууну жеңилдетүү үчүн, багытталган компоненттерди бөлүп, ушул папкага салам. Мен үчүн багытталган компоненттер баракчаларды чагылдырган жана маршруттары бар компонент гана эмес. Мен аларды "Көрүүлөргө" жайгаштырдым, баракты карап жатканда, ошол папкага өтүңүз.

Зарылдыгына жараша башка папкаларды кошо аласыз, мис. 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
  • NewsCard

Эгерде сиздин акылдуу компонентиңиз жөн гана ыкмалары бар BaseCard "акылдуу" эмес болсо, анда жөн гана Base (же App же V) менен башталбай, компонентиңизге дал келген каалаган аталышты колдонуңуз. Мисалы:

  • DashboardStatistics
  • Издөө жыйынтыктары
  • Колдонуучунун профили

Бул аталыштар конвенциясы Vue.j сайтындагы расмий стилдер көрсөтмөсүнөн келип чыккан, ошондой эле ат коюунун шарттарын камтыйт!

Ат коюунун эрежелери

Vue.j стили боюнча расмий колдонмодон долбоорду жакшылап түзүшүңүз керек болгон кээ бир конвенциялар келтирилген:

  • Компоненттин аталышы ар дайым бир нече сөздөн турушу керек, мунун түпкү колдонмо компоненттеринен тышкары. Мисалы, "Card" ордуна "UserCard" же "ProfileCard" колдонуңуз.
  • Ар бир компонент өзүнүн файлында болушу керек.
  • Жалгыз файлдык компоненттердин файл аттары ар дайым PascalCase же ар дайым Kebab-кейсте болушу керек. "UserCard.vue" же "user-card.vue" колдонуңуз.
  • Бир тараптан бир гана жолу колдонулган компоненттер бир гана болушу мүмкүн экендигин көрсөтүү үчүн "The" префикси менен башталат. Мисалы, навигация тилкеси же колонтитулу үчүн TheNavbar.vue же TheFooter.vue колдонуңуз.
  • Балдар компоненттери ата-энесинин префиксине жазылышы керек. Мисалы, "UserCard" ичинде "Фото" компонентин колдонууну кааласаңыз, ага "UserCardPhoto" деп ат коюңуз. Бул папкадагы файлдар адатта алфавит боюнча иреттелгендиктен, окууну жакшыраак жүргүзүүгө болот.
  • Компоненттериңиздин аталышындагы аббревиатуранын ордуна ар дайым толук аталышын колдонуңуз. Мисалы, "UDSettings" колдонбостон, "UserDashboardSettings".

Vue.js стили боюнча расмий колдонмо

Vue.js же башталгыч деңгээлиңизди өркүндөтсөңүз дагы, бул Vue.js стили боюнча колдонмо окулушу керек. Анда көптөгөн кеңештер, ошондой эле ат коюуга байланыштуу шарттар камтылган. Анда жасала турган жана аткарылбай турган көптөгөн мисалдар келтирилген.

Эгер сизге бул билдирүү жаккан болсо, анда төмөндөгү ушак баскычын бир нече жолу басып, колдоо көрсөтүңүз! Ошондой эле, каалагандай комментарий берип, ар кандай пикир билдирип коюңуз. Менин артымдан ээрчүүнү унутпаңыз!

Ушул сыяктуу буюмдарды дагы көргүңүз келеби? Патреондо Support мени колдоп коюңуз