Vue.js திட்டத்தை எவ்வாறு கட்டமைப்பது

அறிவார்ந்த மற்றும் முட்டாள் கூறுகளைக் கொண்ட Vue.js இன் சரியான கோப்புறை அமைப்பு மற்றும் கூறு கட்டமைப்பு

மிகைப்படுத்தலை விட, Vue.js ஒரு சிறந்த முன் இறுதியில் கட்டமைப்பாகும். தொடங்குவது மற்றும் வலை பயன்பாட்டை உருவாக்குவது எளிது. Vue.js பெரும்பாலும் சிறிய பயன்பாடுகளுக்கான கட்டமைப்பாகவும் சில சமயங்களில் jQuery க்கு மாற்றாகவும் இது மிகவும் சிறியதாக இருப்பதால் விவரிக்கப்படுகிறது! தனிப்பட்ட முறையில், பெரிய திட்டங்களுக்கும் இது பொருத்தமானது என்று நான் நினைக்கிறேன். இந்த விஷயத்தில், கூறு கட்டமைப்பின் அடிப்படையில் அதை நன்கு கட்டமைப்பது முக்கியம்.

எனது முதல் பெரிய Vue.js திட்டத்தைத் தொடங்குவதற்கு முன், சரியான கோப்புறை அமைப்பு, கூறு கட்டமைப்பு மற்றும் பெயரிடும் மாநாட்டைக் கண்டுபிடிக்க சில ஆராய்ச்சி செய்தேன். நான் Vue.js ஆவணங்கள், சில கட்டுரைகள் மற்றும் பல கிட்ஹப் திறந்த மூல திட்டங்கள் மூலம் பார்த்தேன்.

எனது சில கேள்விகளுக்கான பதில்களை நான் கண்டுபிடிக்க வேண்டியிருந்தது. அதை இந்த இடுகையில் நீங்கள் காணலாம்:

  • Vue.js திட்டத்தில் கோப்புகள் மற்றும் கோப்புறைகளை எவ்வாறு கட்டமைப்பது?
  • ஸ்மார்ட் மற்றும் ஊமை கூறுகளை எவ்வாறு எழுதுகிறீர்கள், அவற்றை எங்கே வைக்கிறீர்கள்? இது ரியாக்டில் இருந்து ஒரு கருத்து.
  • Vue.j இன் குறியீட்டு நடை மற்றும் சிறந்த நடைமுறைகள் என்ன?

ஒரு சிறந்த புரிதலுக்காக நான் ஈர்க்கப்பட்ட மூலத்தையும் பிற இணைப்புகளையும் ஆவணப்படுத்துவேன்.

Vue.js கோப்புறை அமைப்பு

Src கோப்புறையின் உள்ளடக்கங்கள் இங்கே. Vue CLI உடன் திட்டத்தைத் தொடங்க பரிந்துரைக்கிறேன். தனிப்பட்ட முறையில், நான் நிலையான வலைப்பக்க வார்ப்புருவைப் பயன்படுத்தினேன்.

. App.css ├── App.vue ets சொத்துக்கள் │ │ ... ├── கூறுகள் │ │ ... ├── main.js ├── மிக்சின்கள் │ │ ... திசைவி └── index.js ├── சேமி │ ├── index.js │ ├── தொகுதிகள் │ │ └── ... │ │ பிறழ்வு-வகைகள். Js ├── மொழிபெயர்ப்புகள் │ └── index.js பாத்திரங்கள் │ ... └── காட்சிகள் └── ...

இந்த ஒவ்வொரு கோப்புறைகளையும் பற்றிய சில விவரங்கள்:

  • சொத்துக்கள் - இறக்குமதி செய்யப்படும் அனைத்து சொத்துகளையும் உங்கள் கூறுகளுக்குள் வைப்பது இங்குதான்
  • கூறுகள் - முக்கிய காட்சிகள் இல்லாத திட்டங்களின் அனைத்து கூறுகளும்
  • மிக்சின்கள் - மிக்சின்கள் என்பது ஜாவாஸ்கிரிப்ட் குறியீட்டின் துண்டுகள், அவை பல்வேறு கூறுகளில் மீண்டும் பயன்படுத்தப்படுகின்றன. மிக்சினில் நீங்கள் ஒவ்வொரு கூறுகளின் முறைகளையும் Vue.js இலிருந்து செருகலாம். அவை அவற்றைப் பயன்படுத்தும் கூறுகளுடன் இணைக்கப்படுகின்றன.
  • திசைவி - உங்கள் திட்டங்களின் அனைத்து வழிகளும் (என் விஷயத்தில் நான் அவற்றை index.js இல் வைத்திருக்கிறேன்). அடிப்படையில் Vue.js இல் உள்ள அனைத்தும் ஒரு கூறு. ஆனால் எல்லாம் ஒரு பக்கம் அல்ல. ஒரு பக்கத்திற்கு "/ டாஷ்போர்டு", "/ அமைப்புகள்" அல்லது "/ தேடல்" போன்ற பாதை உள்ளது. ஒரு கூறுக்கு ஒரு பாதை இருந்தால், அது அனுப்பப்படுகிறது.
  • store (விரும்பினால்) - பிறழ்வு- type.js இல் உள்ள Vuex மாறிலிகள், துணை கோப்புறை தொகுதிகளில் உள்ள Vuex தொகுதிகள் (பின்னர் அவை index.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 உடன் ஸ்மார்ட் மற்றும் ஊமை கூறுகள்

ஸ்மார்ட் மற்றும் ஊமை கூறுகள் நான் எதிர்வினையிலிருந்து கற்றுக்கொண்ட ஒரு கருத்து. நுண்ணறிவு கூறுகள் கொள்கலன்கள் என்றும் அழைக்கப்படுகின்றன. அவர்கள் தான் மாநில மாற்றங்களைக் கையாளுகிறார்கள். விஷயங்கள் எவ்வாறு செயல்படுகின்றன என்பதற்கு நீங்கள் பொறுப்பு. மாறாக, விளக்கக்காட்சி கூறுகள் என்றும் அழைக்கப்படும் முட்டாள் கூறுகள் தோற்றத்தை மட்டுமே பெறுகின்றன.

எம்.வி.சி வடிவங்களை நீங்கள் அறிந்தவுடன், காப்புப்பிரதி கூறுகளை பார்வைக்கு ஒப்பிடலாம் மற்றும் ஸ்மார்ட் கூறுகளை கட்டுப்படுத்தியுடன் ஒப்பிடலாம்!

எதிர்வினையில், ஸ்மார்ட் மற்றும் ஊமை கூறுகள் வழக்கமாக வெவ்வேறு கோப்புறைகளில் வைக்கப்படுகின்றன, அதே நேரத்தில் Vue.js இல் நீங்கள் அனைத்தையும் ஒரே கோப்புறையில் வைக்கிறீர்கள்: கூறுகள். Vue.js இல் வேறுபடுவதற்கு பெயரிடும் மாநாட்டைப் பயன்படுத்தவும். உங்களிடம் ஒரு முட்டாள் அட்டை கூறு உள்ளது என்று சொல்லலாம். நீங்கள் பின்வரும் பெயர்களில் ஒன்றைப் பயன்படுத்த வேண்டும்:

  • பேஸ்கார்ட்
  • AppCard
  • வி கார்ட்

உங்களிடம் பேஸ்கார்டைப் பயன்படுத்தும் ஒரு ஸ்மார்ட் கூறு இருந்தால், அதற்கு சில முறைகளைச் சேர்த்தால், உங்கள் திட்டத்தைப் பொறுத்து பெயரிடலாம், எடுத்துக்காட்டாக:

  • சுயவிவர அட்டை
  • உருப்படி அட்டை
  • நியூஸ்கார்டு

உங்கள் ஸ்மார்ட் கூறு முறைகள் கொண்ட “சிறந்த” பேஸ்கார்டு இல்லையென்றால், பேஸ் (அல்லது ஆப் அல்லது வி) உடன் தொடங்காமல் உங்கள் கூறுக்கு ஏற்ற எந்த பெயரையும் பயன்படுத்தவும். உதாரணமாக:

  • டாஷ்போர்டு புள்ளிவிவரங்கள்
  • தேடல் முடிவுகள்
  • பயனர் சுயவிவரம்

இந்த பெயரிடும் மாநாடு Vue.j இன் அதிகாரப்பூர்வ பாணி வழிகாட்டியிலிருந்து வருகிறது, இதில் பெயரிடும் மரபுகளும் உள்ளன!

பெயரிடும் விதிகள்

உங்கள் திட்டத்தை நீங்கள் ஒழுங்கமைக்க வேண்டிய அதிகாரப்பூர்வ Vue.j பாணி வழிகாட்டியிலிருந்து சில மரபுகள் இங்கே:

  • கூறு பெயர்கள் எப்போதும் ரூட் பயன்பாட்டு கூறுகளைத் தவிர்த்து பல சொற்களைக் கொண்டிருக்க வேண்டும். எடுத்துக்காட்டாக, "அட்டை" என்பதற்கு பதிலாக "பயனர் அட்டை" அல்லது "சுயவிவர அட்டை" ஐப் பயன்படுத்தவும்.
  • ஒவ்வொரு கூறுகளும் அதன் சொந்த கோப்பில் இருக்க வேண்டும்.
  • ஒற்றை கோப்பு கூறுகளின் கோப்பு பெயர்கள் எப்போதும் பாஸ்கல்கேஸ் அல்லது எப்போதும் கபாப்-கேஸாக இருக்க வேண்டும். "UserCard.vue" அல்லது "user-card.vue" ஐப் பயன்படுத்தவும்.
  • ஒரு பக்கத்திற்கு ஒரு முறை மட்டுமே பயன்படுத்தப்படும் கூறுகள் ஒன்று மட்டுமே இருக்க முடியும் என்பதைக் குறிக்க "தி" முன்னொட்டுடன் தொடங்க வேண்டும். எடுத்துக்காட்டாக, வழிசெலுத்தல் பட்டி அல்லது அடிக்குறிப்புக்கு, TheNavbar.vue அல்லது TheFooter.vue ஐப் பயன்படுத்தவும்.
  • குழந்தை கூறுகள் அவற்றின் பெற்றோர் பெயரை முன்னொட்டு வைக்க வேண்டும். எடுத்துக்காட்டாக, "யூசர்கார்டு" இல் "புகைப்படம்" கூறுகளைப் பயன்படுத்த விரும்பினால், அதற்கு "யூசர் கார்ட்ஃபோட்டோ" என்று பெயரிடுங்கள். ஒரு கோப்புறையில் உள்ள கோப்புகள் வழக்கமாக அகர வரிசைப்படி வரிசைப்படுத்தப்படுவதால் இது சிறந்த வாசிப்புக்குரியது.
  • உங்கள் கூறுகளின் பெயரில் சுருக்கத்திற்கு பதிலாக எப்போதும் முழு பெயரைப் பயன்படுத்துங்கள். எடுத்துக்காட்டாக, "UDSettings" ஐப் பயன்படுத்த வேண்டாம், மாறாக "UserDashboardSettings".

Vue.js அதிகாரப்பூர்வ பாணி வழிகாட்டி

நீங்கள் Vue.js அல்லது ஒரு தொடக்கநிலையாளருடன் முன்னேறியிருந்தாலும், இந்த Vue.js பாணி வழிகாட்டியைப் படிக்க வேண்டும். இது பல உதவிக்குறிப்புகள் மற்றும் பெயரிடும் மரபுகளைக் கொண்டுள்ளது. செய்ய வேண்டிய மற்றும் செய்யக்கூடாத விஷயங்களுக்கு பல எடுத்துக்காட்டுகள் இதில் உள்ளன.

இந்த இடுகையை நீங்கள் ரசித்திருந்தால், உங்கள் ஆதரவைக் காட்ட சில முறை கீழே உள்ள கிசுகிசு பொத்தானைக் கிளிக் செய்க! மேலும், கருத்துத் தெரிவிக்கவும், எந்தவிதமான கருத்தையும் தெரிவிக்கவும். என்னைப் பின்தொடர மறக்காதீர்கள்!

இது போன்ற கூடுதல் உருப்படிகளைப் பார்க்க விரும்புகிறீர்களா? பேட்ரியனில் என்னை ஆதரிக்கவும்