Vue.js ప్రాజెక్ట్ను ఎలా నిర్మించాలి
తెలివైన మరియు తెలివితక్కువ భాగాలతో Vue.js యొక్క ఖచ్చితమైన ఫోల్డర్ నిర్మాణం మరియు భాగం నిర్మాణం
హైప్ కంటే, Vue.js గొప్ప ఫ్రంట్ ఎండ్ ఫ్రేమ్‌వర్క్. ప్రారంభించడం మరియు వెబ్ అనువర్తనాన్ని సృష్టించడం సులభం. Vue.js తరచుగా చిన్న అనువర్తనాల ఫ్రేమ్‌వర్క్‌గా మరియు కొన్నిసార్లు j క్వెరీకి ప్రత్యామ్నాయంగా చాలా చిన్నదిగా వర్ణించబడింది! వ్యక్తిగతంగా, ఇది పెద్ద ప్రాజెక్టులకు కూడా అనుకూలంగా ఉంటుందని నేను భావిస్తున్నాను. ఈ సందర్భంలో, కాంపోనెంట్ ఆర్కిటెక్చర్ పరంగా దీన్ని బాగా నిర్మించడం చాలా ముఖ్యం.
నా మొదటి పెద్ద Vue.js ప్రాజెక్ట్ను ప్రారంభించడానికి ముందు, ఖచ్చితమైన ఫోల్డర్ నిర్మాణం, కాంపోనెంట్ ఆర్కిటెక్చర్ మరియు నామకరణ సమావేశాన్ని కనుగొనడానికి నేను కొంత పరిశోధన చేసాను. నేను Vue.js డాక్యుమెంటేషన్, కొన్ని వ్యాసాలు మరియు అనేక GitHub ఓపెన్ సోర్స్ ప్రాజెక్టుల ద్వారా చూశాను.
నా కొన్ని ప్రశ్నలకు నేను సమాధానాలు కనుగొనవలసి వచ్చింది. మీరు ఈ పోస్ట్‌లో కనుగొనవచ్చు:
- Vue.js ప్రాజెక్ట్‌లో ఫైల్‌లు మరియు ఫోల్డర్‌లను ఎలా నిర్మించాలి?
- మీరు స్మార్ట్ మరియు మూగ భాగాలను ఎలా వ్రాస్తారు మరియు మీరు వాటిని ఎక్కడ ఉంచుతారు? ఇది రియాక్ట్ నుండి వచ్చిన కాన్సెప్ట్.
- Vue.j యొక్క కోడింగ్ శైలి మరియు ఉత్తమ పద్ధతులు ఏమిటి?
మెరుగైన అవగాహన కోసం నేను ప్రేరణ పొందిన మూలం మరియు ఇతర లింక్‌లతో కూడా డాక్యుమెంట్ చేస్తాను.
Vue.js ఫోల్డర్ నిర్మాణం
Src ఫోల్డర్ యొక్క విషయాలు ఇక్కడ ఉన్నాయి. Vue CLI తో ప్రాజెక్ట్ను ప్రారంభించాలని నేను మీకు సిఫార్సు చేస్తున్నాను. వ్యక్తిగతంగా, నేను ప్రామాణిక వెబ్‌ప్యాక్ టెంప్లేట్‌ను ఉపయోగించాను.
. App.css ├── App.vue ets ఆస్తులు │ │ ... ├── భాగాలు │ │ ... ├── main.js ├── మిక్సిన్లు │ │ ... రూటర్ └── index.js ├── సేవ్ ├── ├── index.js │ ├── మాడ్యూల్స్ │ │ └── ... │ │ మ్యుటేషన్-టైప్స్.జెస్ ├── అనువాదాలు │ └── index.js పాత్రలు │ │ ... └── వీక్షణలు └── ...
ఈ ప్రతి ఫోల్డర్‌ల గురించి కొన్ని వివరాలు:
- ఆస్తులు - ఇక్కడ మీరు దిగుమతి చేయబడే అన్ని ఆస్తులను మీ భాగాలలో ఉంచారు
- భాగాలు - ప్రధాన అభిప్రాయాలు లేని ప్రాజెక్టుల యొక్క అన్ని భాగాలు
- మిక్సిన్స్ - మిక్సిన్లు జావాస్క్రిప్ట్ కోడ్ యొక్క ముక్కలు, ఇవి వివిధ భాగాలలో తిరిగి ఉపయోగించబడతాయి. మిక్సిన్లో మీరు Vue.js నుండి ప్రతి భాగం యొక్క పద్ధతులను చేర్చవచ్చు. వాటిని ఉపయోగించే భాగాలతో అవి విలీనం చేయబడతాయి.
- రౌటర్ - మీ ప్రాజెక్టుల యొక్క అన్ని మార్గాలు (నా విషయంలో నేను వాటిని index.js లో కలిగి ఉన్నాను). ప్రాథమికంగా Vue.js లోని ప్రతిదీ ఒక భాగం. కానీ అన్నీ ఒక వైపు కాదు. ఒక పేజీకి "/ డాష్‌బోర్డ్", "/ సెట్టింగులు" లేదా "/ సెర్చ్" వంటి మార్గం ఉంది. ఒక భాగానికి మార్గం ఉంటే, అది ఫార్వార్డ్ చేయబడుతుంది.
- స్టోర్ (ఐచ్ఛికం) - మ్యుటేషన్-టైప్.
- అనువాదాలు (ఐచ్ఛికం) - లోకేల్స్ ఫైల్స్, నేను Vue-i18n ని ఉపయోగిస్తున్నాను మరియు ఇది చాలా బాగా పనిచేస్తుంది.
- యుటిల్స్ (ఐచ్ఛికం) - నేను కొన్ని భాగాలలో ఉపయోగించే విధులు, ఉదా. బి. రీజెక్స్ విలువ పరీక్షలు, స్థిరాంకాలు లేదా ఫిల్టర్లు.
- వీక్షణలు - ప్రాజెక్ట్ చదవడానికి సులభతరం చేయడానికి, నేను రూట్ చేసిన భాగాలను వేరు చేసి వాటిని ఈ ఫోల్డర్‌లో ఉంచుతాను. నా కోసం మార్గనిర్దేశం చేయబడిన భాగాలు పేజీలను సూచించే మరియు మార్గాలను కలిగి ఉన్న ఒక భాగం కంటే ఎక్కువ. నేను వాటిని "వీక్షణలు" లో ఉంచాను, మీరు ఒక పేజీని సమీక్షించినప్పుడు, ఆ ఫోల్డర్‌కు మారండి.
మీరు అవసరమైన విధంగా ఇతర ఫోల్డర్‌లను జోడించవచ్చు, ఉదా. 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 తో స్మార్ట్ వర్సెస్ మూగ భాగాలు
స్మార్ట్ మరియు మూగ భాగాలు నేను రియాక్ట్ నుండి నేర్చుకున్న భావన. ఇంటెలిజెంట్ భాగాలను కంటైనర్లు అని కూడా అంటారు. రాష్ట్ర మార్పులతో వ్యవహరించే వారు వారే. విషయాలు ఎలా పని చేస్తాయనే దానిపై మీరే బాధ్యత వహించాలి. దీనికి విరుద్ధంగా, ప్రదర్శన భాగాలు అని కూడా పిలువబడే తెలివితక్కువ భాగాలు, రూపాన్ని మాత్రమే తీసుకుంటాయి.
మీరు MVC నమూనాలతో పరిచయం పొందిన తర్వాత, మీరు బ్యాకప్ భాగాలను వీక్షణకు మరియు స్మార్ట్ భాగాలను నియంత్రికతో పోల్చవచ్చు!
రియాక్ట్‌లో, స్మార్ట్ మరియు మూగ భాగాలు సాధారణంగా వేర్వేరు ఫోల్డర్‌లలో ఉంచబడతాయి, అయితే Vue.js లో మీరు అవన్నీ ఒకే ఫోల్డర్‌లో ఉంచుతారు: భాగాలు. Vue.js లో వేరు చేయడానికి నామకరణ సమావేశాన్ని ఉపయోగించండి. మీకు స్టుపిడ్ కార్డ్ భాగం ఉందని చెప్పండి. అప్పుడు మీరు ఈ క్రింది పేర్లలో ఒకదాన్ని ఉపయోగించాలి:
- బేస్‌కార్డ్
- యాప్‌కార్డ్
- VCard
మీకు బేస్‌కార్డ్‌ను ఉపయోగించే స్మార్ట్ భాగం ఉంటే మరియు దానికి కొన్ని పద్ధతులను జోడిస్తే, ఉదాహరణకు మీ ప్రాజెక్ట్‌ని బట్టి మీరు దీనికి పేరు పెట్టవచ్చు:
- ప్రొఫైల్ కార్డ్
- ఐటెమ్‌కార్డ్
- న్యూస్‌కార్డ్
మీ స్మార్ట్ భాగం కేవలం "తెలివిగల" బేస్‌కార్డ్ పద్ధతులతో కాకపోతే, బేస్ (లేదా అనువర్తనం లేదా వి) తో ప్రారంభించకుండా మీ భాగానికి సరిపోయే ఏదైనా పేరును ఉపయోగించండి. ఉదాహరణ:
- డాష్‌బోర్డ్ గణాంకాలు
- శోధన ఫలితాలు
- వినియోగదారు వివరాలు
ఈ నామకరణ సమావేశం Vue.j నుండి అధికారిక స్టైల్ గైడ్ నుండి వచ్చింది, దీనిలో నామకరణ సమావేశాలు కూడా ఉన్నాయి!
నామకరణ నియమాలు
మీ ప్రాజెక్ట్ను చక్కగా నిర్వహించాల్సిన అధికారిక Vue.j స్టైల్ గైడ్ నుండి కొన్ని సమావేశాలు ఇక్కడ ఉన్నాయి:
- మూల పేర్లు ఎల్లప్పుడూ మూల అనువర్తన భాగాలను మినహాయించి బహుళ పదాలను కలిగి ఉండాలి. ఉదాహరణకు, "కార్డ్" కు బదులుగా "యూజర్‌కార్డ్" లేదా "ప్రొఫైల్ కార్డ్" ఉపయోగించండి.
- ప్రతి భాగం దాని స్వంత ఫైల్‌లో ఉండాలి.
- సింగిల్-ఫైల్ భాగాల ఫైల్ పేర్లు ఎల్లప్పుడూ పాస్కల్ కేస్ లేదా ఎల్లప్పుడూ కబాబ్-కేస్ అయి ఉండాలి. "UserCard.vue" లేదా "user-card.vue" ఉపయోగించండి.
- ఒక్కో వైపు మాత్రమే ఉపయోగించబడే భాగాలు "ది" ఉపసర్గతో ప్రారంభం కావాలి. ఉదాహరణకు, నావిగేషన్ బార్ లేదా ఫుటర్ కోసం, TheNavbar.vue లేదా TheFooter.vue ని ఉపయోగించండి.
- పిల్లల భాగాలు వారి తల్లిదండ్రుల పేరును ఉపసర్గ చేయాలి. ఉదాహరణకు, మీరు "యూజర్‌కార్డ్" లో "ఫోటో" భాగాన్ని ఉపయోగించాలనుకుంటే, దానికి "యూజర్‌కార్డ్ ఫొటో" అని పేరు పెట్టండి. ఫోల్డర్‌లోని ఫైల్‌లు సాధారణంగా అక్షరక్రమంలో క్రమబద్ధీకరించబడినందున ఇది మంచి చదవడానికి.
- మీ భాగాల పేరిట సంక్షిప్తీకరణకు బదులుగా పూర్తి పేరును ఎల్లప్పుడూ ఉపయోగించండి. ఉదాహరణకు, "UDSettings" ను ఉపయోగించవద్దు, బదులుగా "UserDashboardSettings".
Vue.js అధికారిక శైలి గైడ్
మీరు Vue.js లేదా ఒక అనుభవశూన్యుడుతో అభివృద్ధి చెందినవారైనా, ఈ Vue.js స్టైల్ గైడ్ చదవాలి. ఇది చాలా చిట్కాలను కలిగి ఉంది మరియు సంప్రదాయాలకు నామకరణం చేస్తుంది. చేయవలసిన మరియు చేయకూడని పనులకు ఇది చాలా ఉదాహరణలు.
మీరు ఈ పోస్ట్‌ను ఆస్వాదించినట్లయితే, దయచేసి మీ మద్దతును చూపించడానికి కొన్ని సార్లు క్రింద ఉన్న గాసిప్ బటన్‌ను క్లిక్ చేయండి! అలాగే, సంకోచించకండి మరియు ఎలాంటి అభిప్రాయాన్ని ఇవ్వండి. నన్ను అనుసరించడం మర్చిపోవద్దు!
ఇలాంటి మరిన్ని అంశాలను చూడాలనుకుంటున్నారా? పాట్రియన్ on లో నాకు మద్దతు ఇవ్వండి