Ինչպե՞ս կառուցել 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 ets Ակտիվներ │ │ ... ├── Բաղադրիչներ │ │ ... ├── main.js ├── խառնուրդներ │ │ ... ├── երթուղիչ │ └── index.js ├── փրկել │ ├── index.js ├── մոդուլներ │ │ └── ... │ │ mutation-types.js ├── թարգմանություններ │ └── index.js ─ Սպասք │ │ ... Դիտումներ └── ...

Այս թղթապանակներից յուրաքանչյուրի վերաբերյալ որոշ մանրամասներ.

  • Ակտիվներ - այստեղ է, որ դուք դնում եք բոլոր ակտիվները, որոնք կներկրվեն ձեր բաղադրիչների մեջ
  • Բաղադրիչներ - viewsրագրերի բոլոր բաղադրիչները, որոնք հիմնական տեսակետները չեն
  • mixins - Mixins- ը Javascript կոդի այն մասերն են, որոնք կրկին օգտագործվում են տարբեր բաղադրիչների մեջ: Mixin- ում դուք կարող եք տեղադրել Vue.j- ի յուրաքանչյուր բաղադրիչի մեթոդները: Դրանք միավորվել են դրանց օգտագործող բաղադրիչի հետ:
  • երթուղիչ - Ձեր նախագծերի բոլոր երթուղիները (իմ դեպքում դրանք ինդեքսում եմ: js): Հիմնականում Vue.js- ի ամեն ինչ բաղադրիչ է: Բայց բոլորը մի կողմ չեն: Էջն ունի երթուղի ՝ «/ վահանակ», «/ պարամետրեր» կամ «/ որոնում»: Եթե ​​բաղադրիչն ունի երթուղի, այն վերահասցեավորվում է:
  • խանութ (ըստ ցանկության) - Vuex- ի հաստատունները մուտացիայի տիպում. js- ում, Vuex մոդուլները ենթապանակների մոդուլներում (որոնք այնուհետև բեռնվում են index.js- ում):
  • Թարգմանություններ (ըստ ցանկության) - Տեղաբաշխում է ֆայլերը, ես օգտագործում եմ Vue-i18n, և դա բավականին լավ է աշխատում:
  • utils (ըստ ցանկության) - գործառույթներ, որոնք ես օգտագործում եմ որոշ բաղադրիչների մեջ, օրինակ. Բ. Regex- ի արժեքի թեստեր, հաստատուններ կամ ֆիլտրեր:
  • Դիտումներ - Նախագիծը ավելի հեշտ ընթերցելու համար ես կառանձնացնեմ երթուղային բաղադրիչները և դրանք կդնեմ այս պանակում: Այն բաղադրիչները, որոնք ինձ համար երթուղային են, ավելին են, քան պարզապես բաղադրիչ, քանի որ դրանք ներկայացնում են էջեր և ունեն երթուղիներ: Դրանից հետո ես դրանք տեղադրեցի «Դիտումներում», էջը վերանայելիս անցեք այդ թղթապանակին:

Անհրաժեշտության դեպքում կարող եք ավելացնել այլ պանակներ, օրինակ. Բ. Fտիչներ կամ հաստատուններ, 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.j- ում տարբերակելու համար օգտագործեք անվանակոչման պայմանագիր: Ասենք, որ դուք ունեք հիմար քարտի բաղադրիչ: Ապա դուք պետք է օգտագործեք հետևյալ անուններից մեկը.

  • BaseCard
  • AppCard
  • VCard

Եթե ​​ունեք BaseCard օգտագործող խելացի բաղադրիչ և դրան ավելացնում են որոշ մեթոդներ, այն կարող եք անվանել ՝ կախված ձեր նախագծից, օրինակ ՝

  • ProfileCard
  • ItemCard
  • Նորությունների քարտ

Եթե ​​ձեր խելացի բաղադրիչը պարզապես «ավելի խելացի» BaseCard քարտ չէ, պարզապես օգտագործեք ցանկացած անուն, որը համապատասխանում է ձեր բաղադրիչին ՝ առանց Base- ից (կամ App- ից կամ V- ից) սկսելու: Օրինակ:

  • Վահանակ Վիճակագրություն
  • Որոնման արդյունքները
  • Օգտատիրոջ պրոֆիլը

Անվանման այս համագումարը գալիս է Vue.j- ի պաշտոնական ոճի ուղեցույցից, որը պարունակում է նաև անվանակոչության պայմանագրեր:

Անվանման կանոններ

Ահա Vue.j ոճի պաշտոնական ուղեցույցից մի քանի կոնվենցիաներ, որոնք անհրաժեշտ կլինեն ձեր նախագիծը լավ կառուցելու համար.

  • Բաղադրիչների անունները միշտ պետք է բաղկացած լինեն բազմաթիվ բառերից, բացառությամբ արմատային հավելվածի բաղադրիչների: Օրինակ ՝ «Քարտի» փոխարեն օգտագործեք «UserCard» կամ «ProfileCard»:
  • Յուրաքանչյուր բաղադրիչ պետք է լինի իր սեփական ֆայլում:
  • Մեկ ֆայլերի բաղադրիչների ֆայլերի անունները կա՛մ միշտ պետք է լինեն PascalCase, կա՛մ միշտ Քյաբաբ գործ: Օգտագործեք «UserCard.vue» կամ «user-card.vue»:
  • Բաղադրիչները, որոնք օգտագործվում են յուրաքանչյուր կողմում միայն մեկ անգամ, պետք է սկսվեն «The» նախածանցով `նշելու, որ կարող է լինել միայն մեկը: Օրինակ ՝ նավիգացիոն գոտու կամ տողատակի համար օգտագործեք TheNavbar.vue կամ TheFooter.vue:
  • Երեխայի բաղադրիչները պետք է նախածանցեն իրենց ծնողական անունը: Օրինակ, եթե ցանկանում եք «UserCard» - ում օգտագործել «Photo» բաղադրիչ, ապա այն անվանեք «UserCardPhoto»: Սա ավելի լավ ընթերցանության համար է, քանի որ պանակում գտնվող ֆայլերը սովորաբար դասավորված են այբբենական կարգով:
  • Միշտ օգտագործեք լրիվ անվանումը ՝ ձեր բաղադրիչների անվանման հապավման փոխարեն: Օրինակ ՝ մի օգտագործեք «UDSettings», այլ ավելի շուտ ՝ «UserDashboardSettings»:

Vue.js պաշտոնական ոճի ուղեցույց

Անկախ նրանից, դուք առաջադեմ եք Vue.js- ով կամ սկսնակով, այս Vue.js ոճի ուղեցույցը պետք է կարդալ: Այն պարունակում է բազմաթիվ խորհուրդներ և անվանակոչման պայմանագրեր: Այն պարունակում է անելիքների և անելիքների բազմաթիվ օրինակներ:

Եթե ​​ձեզ դուր է եկել այս հաղորդագրությունը, մի քանի անգամ կտտացրեք ներքևում գտնվող բամբասանքների կոճակին ՝ ձեր աջակցությունը ցույց տալու համար: Նաև ազատ զգացեք մեկնաբանել և տալ ցանկացած տեսակի հետադարձ կապ: Մի մոռացեք հետեւել ինձ:

Likeանկանո՞ւմ եք այս նյութի նման այլ իրեր տեսնել: Աջակցեք ինձ Patreon on -ով