Paano bubuo ng isang proyekto ng Vue.js

Ang perpektong istraktura ng folder at sangkap na arkitektura ng Vue.js na may matalino at bobo na mga bahagi

Higit sa hype, ang Vue.js ay isang mahusay na balangkas ng front end. Madaling magsimula at lumikha ng isang web app. Ang Vue.js ay madalas na inilarawan bilang isang balangkas para sa maliliit na apps at kung minsan kahit na bilang isang kahalili sa jQuery dahil napakaliit nito! Sa personal, sa palagay ko ay angkop din ito sa mas malalaking proyekto. Sa kasong ito, mahalaga na buuin ito ng maayos sa mga tuntunin ng sangkap na arkitektura.

Bago simulan ang aking unang malaking proyekto ng Vue.js, gumawa ako ng pagsasaliksik upang makahanap ng perpektong istraktura ng folder, sangkap na arkitektura, at pagpapangalan ng kombensiyon. Tiningnan ko ang dokumentasyon ng Vue.js, ilang mga artikulo, at maraming mga proyekto ng open source ng GitHub.

Kailangan kong maghanap ng mga sagot sa ilan sa aking mga katanungan. Mahahanap mo iyan sa post na ito:

  • Paano mo bubuo ang mga file at folder sa proyekto ng Vue.js?
  • Paano mo isusulat ang mga bahagi ng matalino at pipi at saan mo ilalagay ang mga ito? Ito ay isang konsepto mula sa React.
  • Ano ang istilo ng pag-coding ng Vue.j at pinakamahusay na kasanayan?

Magdodokumento din ako sa pinagmulan na pinasigla ako at iba pang mga link upang makakuha ng mas mahusay na pag-unawa.

Istraktura ng folder ng Vue.js

Narito ang mga nilalaman ng src folder. Inirerekumenda kong simulan ang proyekto sa Vue CLI. Personal, ginamit ko ang karaniwang template ng webpack.

. ├── app.css ├── App.vue ├── Mga Asset │ │ ... ├── Mga Component │ │ ... ├── main.js ├── mixins │ │ ... ├── Router │ └── index.js ├── makatipid │ ├── index.js │ ├── modules │ │ └── ... │ │ mga uri ng mutation.js ├── pagsasalin │ └── index.js ├─ ─ Utensils │ │ ... └── Views ...

Ang ilang mga detalye tungkol sa bawat isa sa mga folder na ito:

  • Mga Asset - Dito mo inilalagay ang lahat ng mga assets na mai-import sa iyong mga bahagi
  • Mga Bahagi - Lahat ng mga bahagi ng mga proyekto na hindi pangunahing mga pananaw
  • mixins - Ang mga mixins ay ang mga piraso ng Javascript code na muling ginagamit sa iba't ibang mga bahagi. Sa isang mixin maaari mong ipasok ang mga pamamaraan ng bawat bahagi mula sa Vue.js. Pinagsama sila sa mga bahagi ng gumagamit sa kanila.
  • router - Lahat ng mga ruta ng iyong mga proyekto (sa aking kaso mayroon ako sa kanila sa index.js). Karaniwan ang lahat sa Vue.js ay isang bahagi. Ngunit hindi lahat ay isang panig. Ang isang pahina ay mayroong ruta tulad ng "/ dashboard", "/ setting" o "/ search". Kung ang isang bahagi ay mayroong ruta, ipapasa ito.
  • tindahan (opsyonal) - Ang Vuex ay nagpapatuloy sa uri ng mutation.js, ang mga module ng Vuex sa mga module ng sub-folder (na kung saan ay nai-load sa index.js).
  • Mga Pagsasalin (opsyonal) - Mga lokal na file, gumagamit ako ng Vue-i18n, at gumagana ito nang maayos.
  • utils (opsyonal) - mga pagpapaandar na ginagamit ko sa ilang mga bahagi, hal. B. Mga pagsubok sa halaga ng Regex, pare-pareho o filter.
  • Mga Pagtingin - Upang gawing mas madaling basahin ang proyekto, paghiwalayin ko ang mga na-target na bahagi at ilagay ito sa folder na ito. Ang mga sangkap na na-ruta para sa akin ay higit pa sa isang bahagi na kumakatawan sa mga pahina at may mga ruta. Inilagay ko ang mga ito sa "Mga Pagtingin", kapag nirepaso mo ang isang pahina, lumipat sa folder na iyon.

Maaari kang magdagdag ng iba pang mga folder kung kinakailangan, hal. B. Mga filter o pare-pareho, API.

Ang ilang mga mapagkukunan na nagbigay inspirasyon sa akin

  • 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

Matalinong kumpara sa pipi na mga bahagi na may Vue.js

Ang mga smart at pipi na sangkap ay isang konsepto na natutunan ko mula sa React. Ang mga matatalinong bahagi ay tinatawag ding lalagyan. Sila ang nakikipag-usap sa mga pagbabago sa estado. Ikaw ay responsable para sa kung paano gumana ang mga bagay. Sa kabaligtaran, ang mga hangal na sangkap, na tinatawag ding mga sangkap ng pagtatanghal, ay nagpapakita lamang ng hitsura.

Kapag pamilyar ka sa mga pattern ng MVC, maaari mong ihambing ang mga bahagi ng piyus sa view at matalinong mga sangkap sa controller!

Sa React, ang mga matalinong at pipi na sangkap ay karaniwang inilalagay sa iba't ibang mga folder, habang sa Vue.js inilalagay mo silang lahat sa parehong folder: mga bahagi. Gumamit ng isang kombensyon sa pagpapangalan upang makilala ang Vue.js. Sabihin nating mayroon kang isang bobo na sangkap ng kard. Pagkatapos ay dapat mong gamitin ang isa sa mga sumusunod na pangalan:

  • BaseCard
  • AppCard
  • VCard

Kung mayroon kang isang matalinong sangkap na gumagamit ng BaseCard at nagdaragdag ng ilang mga pamamaraan dito, maaari mo itong pangalanan depende sa iyong proyekto halimbawa:

  • Card ng Profile
  • ItemCard
  • NewsCard

Kung ang iyong matalinong sangkap ay hindi lamang isang "mas matalinong" BaseCard na may mga pamamaraan, gumamit lamang ng anumang pangalan na nababagay sa iyong bahagi nang hindi nagsisimula sa Base (o App o V). Halimbawa:

  • Istatistika ng Dashboard
  • Mga Resulta ng Paghahanap
  • Profile ng gumagamit

Ang kombensiyon sa pagbibigay ng pangalan na ito ay nagmula sa opisyal na patnubay sa istilo mula sa Vue.j, na naglalaman din ng mga kombensiyon sa pagngalan!

Mga panuntunan sa pagbibigay ng pangalan

Narito ang ilang mga kombensiyon mula sa opisyal na patnubay sa istilong Vue.j na kakailanganin mong buuin nang maayos ang iyong proyekto:

  • Ang mga pangalan ng bahagi ay dapat palaging binubuo ng maraming mga salita, maliban sa mga sangkap ng root app. Halimbawa, gamitin ang "UserCard" o "ProfileCard" sa halip na "Card".
  • Ang bawat sangkap ay dapat na nasa sariling file.
  • Ang mga pangalan ng file ng mga sangkap na solong-file ay dapat na palaging PascalCase o palaging Kebab-case. Gumamit ng "UserCard.vue" o "user-card.vue".
  • Ang mga bahagi na ginagamit nang isang beses lamang sa bawat panig ay dapat magsimula sa awtomatikong "Ang" upang ipahiwatig na maaari lamang magkaroon ng isa. Halimbawa, para sa isang navigation bar o footer, gamitin ang TheNavbar.vue o TheFooter.vue.
  • Ang mga sangkap ng bata ay dapat na mag-preview ng kanilang pangalan ng magulang. Halimbawa, kung nais mong gumamit ng isang sangkap na "Larawan" sa "UserCard", pangalanan itong "UserCardPhoto". Ito ay para sa mas mahusay na kakayahang mabasa, dahil ang mga file sa isang folder ay karaniwang pinagsunod-sunod ayon sa alpabeto.
  • Palaging gamitin ang buong pangalan sa halip na ang pagpapaikli sa pangalan ng iyong mga bahagi. Halimbawa, gamitin ang "UserDashboardSettings" sa halip na "UDSettings".

Patnubay sa estilo ng opisyal na Vue.js

Kung ikaw ay advanced sa Vue.js o isang nagsisimula, dapat basahin ang gabay sa istilong Vue.js na ito. Naglalaman ito ng maraming mga tip at nagpapangalan din ng mga kombensiyon. Naglalaman ito ng maraming mga halimbawa ng mga bagay na dapat gawin at hindi dapat gawin.

Kung nasiyahan ka sa post na ito, mangyaring i-click ang pindutan ng tsismis sa ibaba ng ilang beses upang maipakita ang iyong suporta! Gayundin, huwag mag-atubiling magbigay ng puna at magbigay ng anumang uri ng puna. Huwag kalimutan na sundin ako!

Nais mo bang makakita ng higit pang mga item tulad ng ito? Suportahan ako sa Patreon