Ինչպե՞ս կառուցել 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 -ով