സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകളും (SPAs) ഉപയോക്തൃ ഇൻ്റർഫേസുകളും വികസിപ്പിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു പുരോഗമന ജാവാസ്ക്രിപ്റ്റ് ചട്ടക്കൂടാണ് Vue JS. അവിടെ ഏറ്റവും വ്യാപകമായി ഉപയോഗിക്കുന്ന ഫ്രണ്ട്-എൻഡ് ഫ്രെയിംവർക്കുകളിൽ ഒന്നാണിത്.
ഒരു വെബ്‌പേജിനെ വ്യത്യസ്‌ത ഘടകങ്ങളായി വിഭജിക്കാനുള്ള കഴിവാണ് വ്യൂവിൻ്റെ രസകരമായ ഒരു സവിശേഷത. യുഐ ഘടക ലൈബ്രറികളുടെ ഉപയോഗത്തോടെ ഈ പ്രക്രിയ ലളിതമാകുന്നു.
ഘടകങ്ങൾ എളുപ്പത്തിലും വേഗത്തിലും സൃഷ്ടിക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന വിവിധ യുഐ ഘടക ലൈബ്രറികളുണ്ട്. അതിനാൽ ഈ ബ്ലോഗിൽ, 10-ലെ മികച്ച 2021 Vue UI ഘടക ലൈബ്രറികൾ ഞങ്ങൾ അവലോകനം ചെയ്യാൻ പോകുന്നു.
1. PrimeVue
പ്രൈംവ്യൂ എന്നത് ഉപയോഗിക്കാൻ ലളിതവും വൈവിധ്യമാർന്നതും മികച്ചതുമായ Vue UI ഘടക ലൈബ്രറിയാണ്, അത് ആകർഷകമായ ഉപയോക്തൃ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.
വെബ് ഉള്ളടക്ക ആക്‌സസിബിലിറ്റി മാർഗ്ഗനിർദ്ദേശങ്ങൾക്കും (WCAG) റെസ്‌പോൺസീവ് ഡിസൈനിനുമുള്ള പൂർണ്ണ പിന്തുണയോടെ 80+ യുഐ ഘടകങ്ങളുണ്ട്. സമീപകാല അപ്‌ഡേറ്റിന് നന്ദി, ലൈബ്രറിക്ക് ഇപ്പോൾ വ്യൂ 3-ന് പൂർണ്ണ പിന്തുണയുണ്ട്. ഇതിന് ഒരു കൂട്ടം കൂടുതൽ ഘടകങ്ങളും ലഭിച്ചു.
പ്രൈംവ്യൂവിൻ്റെ ഏറ്റവും മികച്ച കാര്യങ്ങളിലൊന്ന് അതിൻ്റെ വിശാലമായ ഘടകങ്ങളാണ്. അവ ടേബിളുകളും പാജിനേറ്ററുകളും മുതൽ ഇൻ്ററാക്ടീവ് വ്യൂ ആപ്പുകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന നന്നായി തയ്യാറാക്കിയ ഗ്രാഫ് അധിഷ്‌ഠിത ഓർഗനൈസേഷൻ ചാർട്ടുകൾ വരെയുണ്ട്. ഇത് ഓപ്പൺ സോഴ്‌സാണ് കൂടാതെ Github-ൽ 1k+ നക്ഷത്രങ്ങളും NPM-ൽ 6,983 പ്രതിവാര ഡൗൺലോഡുകളും ഉണ്ട്.
2. Vuetify
മെറ്റീരിയൽ ഡിസൈൻ സ്പെസിഫിക്കേഷൻ ഉപയോഗിക്കുന്ന മനോഹരമായി കൈകൊണ്ട് നിർമ്മിച്ച ഘടകങ്ങളുള്ള ഒരു Vue UI ലൈബ്രറിയാണ് Vuetify. മോഡുലാർ, റെസ്‌പോൺസിവ്, പെർഫോമൻസ് എന്നിങ്ങനെ സൂക്ഷ്മമായി രൂപകല്പന ചെയ്ത എല്ലാ ഘടകങ്ങളും ഉപയോഗിച്ച് മെറ്റീരിയൽ ഡിസൈൻ സ്പെസിഫിക്കേഷനുകൾക്കനുസൃതമായി ഇത് കൃത്യമായി വികസിപ്പിച്ചെടുത്തിട്ടുണ്ടെന്നാണ് ഇതിനർത്ഥം.
അദ്വിതീയവും ചലനാത്മകവുമായ ലേഔട്ടുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ ഇഷ്ടാനുസൃതമാക്കാനും SASS വേരിയബിളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ഘടകങ്ങളുടെ ശൈലികൾ മികച്ചതാക്കാനും Vuetify നിങ്ങളെ അനുവദിക്കുന്നു.
ഇത് പ്രവേശനക്ഷമത മാർഗ്ഗനിർദ്ദേശങ്ങൾ, എല്ലാ ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു, കൂടാതെ Vue CLI-3-ന് അനുയോജ്യവുമാണ്. ഇത് സംയോജിപ്പിക്കാൻ എളുപ്പമാണ് ഒപ്പം കറൗസലുകൾ, നാവിഗേഷനുകൾ, കാർഡുകൾ എന്നിവ പോലെ പുനരുപയോഗിക്കാവുന്ന ധാരാളം യുഐ ഘടകങ്ങൾ ഉണ്ട്. Vuetify ഓപ്പൺ സോഴ്‌സാണ്, Github-ൽ 29k-ലധികം നക്ഷത്രങ്ങളും NPM-ൽ 319,170 പ്രതിവാര ഡൗൺലോഡുകളും ഉണ്ട്.
3. ചക്ര യുഐ വ്യൂ
Vue ആപ്ലിക്കേഷനുകൾ വേഗത്തിലും എളുപ്പത്തിലും നിർമ്മിക്കുന്നതിനുള്ള ടൂളുകൾ നൽകുന്ന ലളിതവും ആക്സസ് ചെയ്യാവുന്നതുമായ ഒരു ഘടക ലൈബ്രറിയാണ് ചക്ര യുഐ.
എല്ലാ ഘടകങ്ങളും ആക്സസ് ചെയ്യാവുന്നതാണ് (ഇത് WAI-ARIA മാനദണ്ഡങ്ങൾ കർശനമായി പിന്തുടരുന്നു), തീം ചെയ്യാവുന്നതും രചിക്കാവുന്നതുമാണ്. ഇത് ബോക്‌സിന് പുറത്ത് പ്രതികരിക്കുന്ന ശൈലികളെ പിന്തുണയ്ക്കുന്നു കൂടാതെ ഡാർക്ക് മോഡ് അനുയോജ്യവുമാണ്.
ചക്ര UI-ൽ CBox, CStack എന്നിവ പോലെയുള്ള ഒരു കൂട്ടം ലേഔട്ട് ഘടകങ്ങളും അടങ്ങിയിരിക്കുന്നു, അത് പ്രോപ്‌സ് പാസ്സുചെയ്‌ത് നിങ്ങളുടെ ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു. ഒരു വെബ്‌പാക്ക് പ്ലഗിൻ സൊല്യൂഷൻ ഉപയോഗിച്ച് ചക്ര യുഐ വ്യൂ ഘടകങ്ങൾ സ്വയമേവ ഇറക്കുമതി ചെയ്യാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ഓപ്പൺ സോഴ്‌സാണ് കൂടാതെ Github-ൽ 900+ നക്ഷത്രങ്ങളും NPM-ൽ 331 ആഴ്‌ച ഡൗൺലോഡുകളും ഉണ്ട്.
4. ബൂട്ട്സ്ട്രാപ്പ് വ്യൂ
BootstrapVue, BootstrapVue ഉപയോഗിച്ച് നിങ്ങൾക്ക് Vue.js-ഉം ജനപ്രിയ ഫ്രണ്ട്-എൻഡ് CSS ലൈബ്രറിയായ ബൂട്ട്‌സ്‌ട്രാപ്പും ഉപയോഗിച്ച് വെബിൽ റെസ്‌പോൺസീവ്, മൊബൈൽ-ഫസ്റ്റ്, ARIA ആക്സസ് ചെയ്യാവുന്ന പ്രോജക്റ്റുകൾ നിർമ്മിക്കാൻ കഴിയും. ഡോക്യുമെൻ്റേഷൻ മനസ്സിലാക്കാൻ എളുപ്പമാണ് ഒപ്പം സജ്ജീകരിക്കാനും എളുപ്പമാണ്. ഇത് ഫ്രണ്ട് എൻഡ് നടപ്പിലാക്കലുകൾ വേഗത്തിലാക്കുന്നു.
ഇത് 85+ ഘടകങ്ങൾ, ലഭ്യമായ 45 ലധികം പ്ലഗിനുകൾ, നിരവധി നിർദ്ദേശങ്ങൾ, 1000+ ഐക്കണുകൾ എന്നിവ വാഗ്ദാനം ചെയ്യുന്നു. ഇത് ലേഔട്ടുകൾക്കും റെസ്‌പോൺസീവ് ഡിസൈനിനും അനുയോജ്യമായ പ്രവർത്തന ഘടകങ്ങളും നൽകുന്നു. നിങ്ങൾക്ക് Nuxt.js മൊഡ്യൂൾ ഉപയോഗിച്ച് നിങ്ങളുടെ Nuxt.js പ്രോജക്റ്റുകളിലേക്ക് BootstrapVue എളുപ്പത്തിൽ സംയോജിപ്പിക്കാനും കഴിയും.
ബൂട്ട്സ്ട്രാപ്പ് CSS ചട്ടക്കൂട് ഉപയോഗിക്കുന്നതുപോലെ തന്നെ ഇതും ഉപയോഗിക്കുന്നു. ഏകദേശം 12.9k നക്ഷത്രങ്ങളും 1.7k ഫോർക്കുകളും ഉള്ള Github-ൽ ഇത് ഓപ്പൺ സോഴ്സ് ചെയ്‌തിരിക്കുന്നു.
5. വ്യൂസാക്സ്
പ്രോജക്റ്റുകൾ എളുപ്പത്തിലും സവിശേഷവും മനോഹരവുമായ ശൈലിയിൽ സൃഷ്ടിക്കാൻ വ്യൂജുകൾ ഉപയോഗിച്ച് സൃഷ്‌ടിച്ച ഒരു പുതിയ യുഐ ഘടക ചട്ടക്കൂടാണ് വ്യൂസാക്സ്, ആദ്യം മുതൽ സൃഷ്‌ടിച്ചതും ഫ്രണ്ട്എൻഡ് കാമുകൻ മുതൽ ബാക്കെൻഡ് വരെയുള്ള എല്ലാത്തരം ഡെവലപ്പർമാർക്കും വേണ്ടി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നതുമാണ്. അന്തിമ ഉപയോക്താവ്. ഡിസൈനുകൾ ഓരോ ഘടകത്തിനും അദ്വിതീയമാണ്, കൂടാതെ ഏതെങ്കിലും വിഷ്വൽ ട്രെൻഡുകളിലേക്കോ ഡിസൈൻ നിയമങ്ങളിലേക്കോ ആങ്കർ ചെയ്തിട്ടില്ല, ഇത് ഉപയോഗിച്ച് നിർമ്മിച്ച പ്രോജക്റ്റുകളെ അതുല്യമാക്കുന്നു.
ഇത് പ്രതികരിക്കുന്ന പേജുകളും പുനരുപയോഗിക്കാവുന്നതും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ യുഐ ഘടകങ്ങളും വാഗ്ദാനം ചെയ്യുന്നു. npm അല്ലെങ്കിൽ CDN ഉപയോഗിച്ച് ആരംഭിക്കുന്നതും എളുപ്പമാണ്. ഇത് നിലവിൽ അതിൻ്റെ സമീപകാല പതിപ്പിൽ Vue CLI 3 പിന്തുണയ്ക്കുന്നില്ല. ഏകദേശം 4.9k നക്ഷത്രങ്ങളും 6700 പ്രതിവാര ഡൗൺലോഡുകളും NPM ഉള്ള Github-ൽ ഇത് ഓപ്പൺ സോഴ്സ് ചെയ്‌തിരിക്കുന്നു.
6. ആൻ്റ് ഡിസൈൻ വ്യൂ
ആൻ്റ് ഡിസൈൻ സ്പെസിഫിക്കേഷനെ അടിസ്ഥാനമാക്കിയുള്ള ആൻ്റ് ഡിസൈൻ വ്യൂ, സമ്പന്നവും സംവേദനാത്മകവുമായ ഉപയോക്തൃ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഉയർന്ന നിലവാരമുള്ള ഘടകങ്ങളും ഡെമോകളും ഉൾക്കൊള്ളുന്ന ഒരു വ്യൂ യുഐ ലൈബ്രറിയാണ് ആൻ്റ് ഡിസൈൻ വ്യൂ.
നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകളായ അസ്ഥികൂടം, ഡ്രോയർ, സ്ഥിതിവിവരക്കണക്കുകൾ എന്നിവയും മറ്റും സമ്പുഷ്ടമാക്കാൻ Ant-design-vue ധാരാളം UI ഘടകങ്ങൾ നൽകുന്നു.
ആൻ്റ് ഡിസൈൻ വ്യൂ പതിപ്പ് 2 ൻ്റെ സമീപകാല റിലീസിനൊപ്പം, ഇത് വേഗത്തിലും എളുപ്പത്തിലും സംയോജിപ്പിക്കാൻ അപ്‌ഡേറ്റുചെയ്‌തു, ചെറിയ ബണ്ടിൽ വലുപ്പം, കൂടാതെ Vue 3, പുതിയ കോമ്പോസിഷൻ API ഡോക്യുമെൻ്റിനെ പിന്തുണയ്ക്കുന്നു. ആധുനിക വെബ് ബ്രൗസറുകൾ, സെർവർ-സൈഡ് റെൻഡറിംഗ്, ഇലക്ട്രോൺ എന്നിവയും ഇത് പിന്തുണയ്ക്കുന്നു. ഇതിന് Github-ൽ 13k-ലധികം നക്ഷത്രങ്ങളും 39,693 പ്രതിവാര ഡൗൺലോഡ് NPM-ലും ഉണ്ട്.
7. ക്വാസർ
Quasar CLI വഴി എല്ലാ പ്ലാറ്റ്ഫോമുകൾക്കുമായി ഒരു സോഴ്സ് കോഡ് ബേസ് ഉപയോഗിക്കാൻ ഡവലപ്പർമാരെ അനുവദിക്കുന്ന മികച്ച Vue UI ചട്ടക്കൂടുകളിൽ ഒന്നാണ് ക്വാസർ. ഡെവലപ്പർമാരെ അവരുടെ ആപ്പിൻ്റെ ഉള്ളടക്കത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ ഇത് അനുവദിക്കുന്നു, അതിന് ചുറ്റുമുള്ള മറ്റെല്ലാ ബോയിലർ പ്ലേറ്റിംഗ് സ്റ്റഫുകളും (ബിൽഡ് സിസ്റ്റം, ലേഔട്ട്) ഇത് മെറ്റീരിയൽ 2.0 മാർഗ്ഗനിർദ്ദേശങ്ങൾ പിന്തുടരുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചിരിക്കുന്നു കൂടാതെ വളരെ പിന്തുണയുള്ള ഒരു കമ്മ്യൂണിറ്റിയും ഉണ്ട്.
ഒരു തവണ കോഡ് എഴുതാനും ഒരേസമയം ഒരു വെബ്‌സൈറ്റായി വിന്യസിക്കാനുമുള്ള കഴിവാണ് ക്വാസറിനെക്കുറിച്ചുള്ള ഒരു പ്രത്യേക കാര്യം, ഒരു കോഡ്ബേസ് ഉപയോഗിച്ച് ഒരു മൊബൈൽ ആപ്പ്. vue 3 ഫീച്ചറുകളെ പിന്തുണയ്ക്കുന്ന ഒരു പുതിയ പതിപ്പും നിലവിൽ ബീറ്റയിലുണ്ട്. Github-ൽ ഇതിന് ഏകദേശം 17.8k നക്ഷത്രങ്ങളുണ്ട്.
8. ബ്യൂഫി
ബൾമ (ഒരു CSS ചട്ടക്കൂട്) അടിസ്ഥാനമാക്കിയുള്ള Vue JS-നുള്ള ഭാരം കുറഞ്ഞ UI ഘടക ലൈബ്രറിയാണ് Buefy. ബ്യൂഫി ബൾമയെ Vue-മായി സംയോജിപ്പിക്കുന്നു, കുറഞ്ഞ കോഡ് ഉപയോഗിച്ച് നല്ല രൂപത്തിലുള്ള ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു. ഇത് നിങ്ങളുടെ ബൾമ ഇൻ്റർഫേസിനുള്ള ജാവാസ്ക്രിപ്റ്റ് ലെയറാണ്.
ഒരു സാധാരണ വെബ്‌പേജിൽ ഇത് പൂർണ്ണമായും അല്ലെങ്കിൽ ഒറ്റ ഘടകങ്ങളായി ഇറക്കുമതി ചെയ്യാവുന്നതാണ്. നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് ഇത് സംയോജിപ്പിക്കുന്നത് വളരെ എളുപ്പമാണ്, ഒന്നുകിൽ npm അല്ലെങ്കിൽ CDN ഉപയോഗിച്ച് ചെയ്യാം.
ബ്യൂഫി റെഡിമെയ്ഡ് യുഐ ഘടകങ്ങൾ, ലേഔട്ട്, ഐക്കണുകൾ എന്നിവ നൽകുന്നു. ഘടകങ്ങൾക്ക് നിങ്ങളുടെ തീമിലേക്ക് SASS ഉപയോഗിക്കാം. ഇത് ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു.
9. വ്യൂ മെറ്റീരിയൽ
മെറ്റീരിയൽ ഡിസൈൻ സ്പെസിഫിക്കേഷനുകൾ നടപ്പിലാക്കുന്ന, വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്ന, ഭാരം കുറഞ്ഞ ചട്ടക്കൂടാണ് വ്യൂ മെറ്റീരിയൽ. Vue.js ഉം മെറ്റീരിയൽ ഡിസൈൻ സ്പെസിഫിക്കേഷനുകളും തമ്മിലുള്ള ഏറ്റവും മികച്ച സംയോജനമാണിത്! എളുപ്പമുള്ള API വഴി നിങ്ങളുടെ എല്ലാ ആവശ്യങ്ങൾക്കും അനുയോജ്യമായ രീതിയിൽ നിങ്ങൾക്ക് ഇത് എളുപ്പത്തിൽ ക്രമീകരിക്കാൻ കഴിയും.
എല്ലാ ആധുനിക വെബ് ബ്രൗസറുകൾക്കുമുള്ള റെസ്‌പോൺസീവ് ഡിസൈനും പിന്തുണയുമായി ഇത് പൊരുത്തപ്പെടുന്നു. ലൈബ്രറിയെ തീമുകൾ, ഘടകങ്ങൾ, യുഐ ഘടകങ്ങൾ എന്നിങ്ങനെ തിരിച്ചിരിക്കുന്നു. തീമുകൾ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ എങ്ങനെ തീം ചെയ്യാം (അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം തീമുകൾ എഴുതുക) എന്നതിനെക്കുറിച്ചുള്ള കൃത്യമായ ഗൈഡ് നൽകുന്നു, കൂടാതെ ഘടകങ്ങളും UI ഘടകങ്ങളും ലേഔട്ടുകൾ, നാവിഗേഷൻ, ടൈപ്പോഗ്രാഫി, ഐക്കണുകൾ, കൂടാതെ 30 ഘടകങ്ങൾ എന്നിവ ഉൾക്കൊള്ളുന്നു. ഇതിന് Github-ൽ ഏകദേശം 9.2k നക്ഷത്രങ്ങളും 1.1k ഫോർക്കുകളും ഉണ്ട്, കൂടാതെ 21k + പ്രതിവാര ഡൗൺലോഡുകൾ NPM.
10. കീൻ യുഐ
Google-ൻ്റെ മെറ്റീരിയൽ ഡിസൈനിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട് ലളിതമായ API ഉള്ള ഒരു ഭാരം കുറഞ്ഞ vue.js UI ലൈബ്രറിയാണ് KeenUI. കീൻ യുഐ ഒരു CSS ചട്ടക്കൂടല്ല. അതിനാൽ, ഒരു ഗ്രിഡ് സിസ്റ്റത്തിനായുള്ള ശൈലികൾ, ടൈപ്പോഗ്രാഫി മുതലായവ ഇതിൽ ഉൾപ്പെടുന്നില്ല. പകരം, ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമായ ഇൻ്ററാക്ടീവ് ഘടകങ്ങളിലാണ് ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്.
പുനരുപയോഗിക്കാവുന്ന 30 ഓളം ഘടകങ്ങൾ ഇതിലുണ്ട്. SASS വേരിയബിളുകൾ ഉപയോഗിച്ച് ശൈലികൾ അസാധുവാക്കിക്കൊണ്ട് ഘടകങ്ങൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. CDN അല്ലെങ്കിൽ npm ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് സംയോജിപ്പിക്കാൻ കഴിയും. ഇത് ഓപ്പൺ സോഴ്സ് ആണ് കൂടാതെ Github-ൽ ഏകദേശം 4k നക്ഷത്രങ്ങളുണ്ട്.
തീരുമാനം
UI ഘടക ലൈബ്രറികൾ തീർച്ചയായും ഒരു പ്രോജക്റ്റ് നിർമ്മിക്കുന്നത് വളരെ എളുപ്പമാക്കുന്നു. ശരിയായത് തിരഞ്ഞെടുക്കുന്നത് നിങ്ങൾ പ്രവർത്തിക്കാൻ ആഗ്രഹിക്കുന്ന പ്രോജക്റ്റിൻ്റെ സവിശേഷതകളെ ആശ്രയിച്ചിരിക്കുന്നു. ഒരു പുതിയ പ്രോജക്റ്റിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, ആവശ്യത്തിന് ഏറ്റവും അനുയോജ്യമായ UI ഘടക ലൈബ്രറി അവലോകനം ചെയ്യുന്നതാണ് ഉചിതം.