Чӣ гуна сохтани лоиҳаи Vue.js

Сохтори папкаи мукаммал ва меъмории ҷузъи Vue.js бо ҷузъҳои оқил ва беақл

Vue.js беш аз шӯру ғавғо як чаҳорчӯбаи охири пеш аст. Оғоз ва сохтани веб-барнома осон аст. Vue.js аксар вақт ҳамчун чаҳорчӯбаи барномаҳои хурд ва баъзан ҳамчун алтернатива ба jQuery тавсиф карда мешавад, зеро он хеле хурд аст! Шахсан, ман фикр мекунам, ки ин барои лоиҳаҳои калонтар ҳам мувофиқ аст. Дар ин ҳолат, онро аз ҷиҳати меъмории ҷузъҳо хуб сохтан муҳим аст.

Пеш аз оғози аввалин лоиҳаи бузурги Vue.js, ман якчанд ҷустуҷӯ кардам, то сохтори папкаҳо, меъмории компонентҳо ва конвенсияи номро пайдо кунам. Ман ҳуҷҷатҳои Vue.js, баъзе мақолаҳо ва бисёр лоиҳаҳои GitHub-и кушодаасосро аз назар гузарондам.

Ба ман лозим омад, ки ба баъзе саволҳои худ посух ёбам. Шумо метавонед инро дар ин вазифа пайдо кунед:

  • Шумо чӣ гуна файлҳо ва ҷузвдонҳоро дар лоиҳаи Vue.js сохтори?
  • Чӣ гуна шумо ҷузъҳои доно ва гунгро менависед ва онҳоро дар куҷо ҷойгир мекунед? Ин як консепсия аз React аст.
  • Тарзи рамзгузории Vue.j ва таҷрибаи пешқадам кадомҳоянд?

Ман инчунин бо сарчашмае, ки аз ҷониби ман илҳом гирифтаам ва дигар пайвандҳо барои фаҳмиши беҳтар ҳуҷҷатгузорӣ мекунам.

Сохтори ҷузвдони Vue.js

Инҳо мундариҷаи ҷузвдони src мебошанд. Ман тавсия медиҳам, ки лоиҳаро бо Vue CLI оғоз кунед. Шахсан ман қолаби стандартии веб-пакетро истифода кардам.

. ├── app.css ├── App.vue ├── дороиҳо │ │ ... ├── ҷузъҳо │ │ ... ├── main.js ├── омехтаҳо │ │ ... ├── роутер │ └── index.js ├── save │ ├── index.js │ ├── модулҳо │ │ └── ... │ │ mutation-types.js ├── тарҷумаҳо │ └── index.js ├─ ─ Зеварҳо │ │ ... └── Дида └── ...

Баъзе тафсилот дар бораи ҳар кадоми ин ҷузвдонҳо:

  • Дороиҳо - Дар ин ҷо шумо ҳамаи дороиҳоеро мегузоред, ки ба ҷузъҳои шумо ворид карда мешаванд
  • Ҷузъҳо - Ҳама ҷузъҳои лоиҳаҳо, ки назари асосӣ нестанд
  • омехтаҳо - омехтаҳо қисмҳои коди Javascript мебошанд, ки дар ҷузъҳои гуногун такроран истифода мешаванд. Дар миксин шумо метавонед усулҳои ҳар як ҷузъро аз Vue.js. гузоред. Онҳо бо компонентҳое, ки онҳоро истифода мебаранд, якҷоя карда шудаанд.
  • роутер - Ҳама хатсайрҳои лоиҳаҳои шумо (дар ҳолати ман ман онҳоро дар index.js доранд). Асосан ҳама чиз дар Vue.js ҷузъи аст. Аммо на ҳама як тарафанд. Як саҳифа масири монанди "/ панели", "/ settings" ё "/ search" дорад. Агар ҷузъе масир дошта бошад, он интиқол дода мешавад.
  • мағоза (ихтиёрӣ) - доимии Vuex дар mutation-type.js, модулҳои 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-case бошад. "UserCard.vue" ё "user-card.vue" -ро истифода баред.
  • Ҷузъҳое, ки дар як тараф танҳо як маротиба истифода мешаванд, бояд аз префикси "The" сар карда, нишон диҳанд, ки танҳо якто буда метавонад. Масалан, барои панели идоракунӣ ё footer, TheNavbar.vue ё TheFooter.vue -ро истифода баред.
  • Ҷузъҳои кӯдакон бояд номи волидайни худро пешванд кунанд. Масалан, агар шумо хоҳед, ки дар "UserCard" ҷузъи "Photo" -ро истифода баред, онро "UserCardPhoto" номгузорӣ кунед. Ин барои хондан беҳтар аст, зеро файлҳо дар ҷузвдон одатан бо алифбо мураттаб карда мешаванд.
  • Ҳамеша ба ҷои ихтисораи номи ҷузъҳои худ номи пурраро истифода баред. Масалан, "UDSettings" -ро не, балки "UserDashboardSettings" -ро истифода баред.

Дастури расмии Vue.js

Новобаста аз он ки шумо бо Vue.js пешрафтаед ё навкор, ин дастури услуби Vue.js бояд хонда шавад. Он дорои бисёр маслиҳатҳо ва инчунин конвенсияҳои номгузорӣ мебошад. Он намунаҳои зиёдеро дар бар мегирад, ки бояд иҷро карда шаванд ва иҷро карда намешаванд.

Агар ин навишта ба шумо писанд омада бошад, лутфан тугмаи ғайбатро дар зер чанд маротиба пахш карда дастгирии худро нишон диҳед! Ғайр аз ин, шарҳ диҳед ва ҳар гуна фикру мулоҳизаҳоро пешниҳод кунед. Аз паси ман рафтанро фаромӯш накунед!

Мехоҳед ин гуна ашёро бештар бубинед? Маро дар Патреон дастгирӣ кунед