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