Vue JS ባለአንድ ገጽ አፕሊኬሽኖችን (SPAs) እና የተጠቃሚ በይነገጾችን ለማዘጋጀት የሚያገለግል ተራማጅ የጃቫ ስክሪፕት ማዕቀፍ ነው። እና እዚያ በብዛት ጥቅም ላይ ከዋሉት የፊት-መጨረሻ ማዕቀፎች ውስጥ አንዱ ነው።

 

የVue አንድ አስደሳች ገጽታ አንድን ድረ-ገጽ ወደ ተለያዩ ክፍሎች የመከፋፈል ችሎታው ነው። እና ይህ ሂደት የUI ክፍሎች ቤተ-ፍርግሞችን በመጠቀም ቀላል ይሆናል።

 

አካላትን በቀላሉ እና በፍጥነት ለመፍጠር የሚያግዙ የተለያዩ የUI ክፍሎች ቤተ-ፍርግሞች አሉ። ስለዚህ በዚህ ብሎግ ለ10 ምርጥ 2021 Vue UI Component Librarys እንገመግማለን።

 

1. PrimeVue

 

PrimeVue ለመጠቀም ቀላል፣ ሁለገብ እና አፈጻጸም ያለው Vue UI Component Library ግሩም የተጠቃሚ በይነገጽ እንዲገነቡ የሚያግዝ ነው።

 

ለድር የይዘት ተደራሽነት መመሪያዎች (WCAG) እና ምላሽ ሰጪ ዲዛይን ሙሉ ድጋፍ ያለው ከ80+ በላይ UI ክፍሎች አሉት። እና ለቅርብ ጊዜ ማሻሻያ ምስጋና ይግባውና ቤተ-መጽሐፍቱ አሁን ለVue 3 ሙሉ ድጋፍ አለው። በተጨማሪም ብዙ ተጨማሪ አካላት አግኝቷል።

 

ስለ Primevue በጣም ጥሩ ከሆኑት ነገሮች ውስጥ አንዱ ሰፊው የአካል ክፍሎች ነው። መስተጋብራዊ Vue መተግበሪያዎችን ለመፍጠር ሊጠቀሙባቸው የሚችሏቸው ከጠረጴዛዎች እና ከፓጊነተሮች እስከ በደንብ የተሰሩ ግራፍ-ተኮር የድርጅት ገበታዎች ይደርሳሉ። ክፍት ምንጭ ነው እና በ Github ላይ 1k+ ኮከቦች እና 6,983 ሳምንታዊ ውርዶች በNPM ላይ አላቸው።

 

2. Vuetify

 

Vuetify የቁሳቁስ ንድፍ ዝርዝር መግለጫን የሚጠቀሙ በሚያምር በእጅ የተሰሩ አካላት ያለው የVue UI ቤተ-መጽሐፍት ነው። ይህ ማለት እያንዳንዱ አካል ሞዱል ፣ ምላሽ ሰጭ እና አፈፃፀም ያለው እንዲሆን በትክክል በቁስ ዲዛይን ዝርዝር መግለጫዎች ተዘጋጅቷል ማለት ነው።

 

Vuetify መተግበሪያዎን በልዩ እና በተለዋዋጭ አቀማመጦች እንዲያበጁ እና የSASS ተለዋዋጮችን በመጠቀም የአካል ክፍሎችዎን ቅጦች እንዲያሟሉ ያስችልዎታል።

 

እንዲሁም የተደራሽነት መመሪያዎችን ፣ ሁሉንም ዘመናዊ አሳሾችን ይደግፋል እና ከVue CLI-3 ጋር ተኳሃኝ ነው። ለማዋሃድ ቀላል ነው እና እንደ ካሮሴሎች፣ አሰሳዎች እና ካርዶች ያሉ ብዙ ተደጋጋሚ የUI ክፍሎች አሉት። Vuetify ክፍት ምንጭ ነው እና በ Github ላይ ከ29k በላይ ኮከቦች እና 319,170 ሳምንታዊ ውርዶች በ NPM ላይ።

 

3. Chakra UI Vue

 

Chakra UI ቀላል ሞጁል እና ተደራሽ አካል ቤተ-መጽሐፍት ሲሆን በፍጥነት እና በቀላሉ የVue መተግበሪያዎችን ለመገንባት የሚረዱ መሳሪያዎችን ይሰጥዎታል።

 

ሁሉም ክፍሎች ተደራሽ ናቸው (የWAI-ARIA ደረጃዎችን በጥብቅ ይከተላል) ፣ ጭብጥ እና ሊገጣጠም የሚችል። ከሳጥኑ ውጪ ምላሽ ሰጪ ቅጦችን ይደግፋል እና ከጨለማ ሁነታ ጋር ተኳሃኝ ነው።

 

Chakra UI እንዲሁም እንደ CBox እና CStack ያሉ የአቀማመጥ ክፍሎችን ይዟል ፕሮፖኖችን በማለፍ የእርስዎን ክፍሎች ቅጥ ማድረግ ቀላል ያደርገዋል። እንዲሁም የዌብፓክ ፕለጊን መፍትሄን በመጠቀም የChakra UI Vue አካላትን በራስ-ሰር እንዲያስመጡ ይፈቅድልዎታል። ክፍት ምንጭ ነው እና በ Github ላይ 900+ ኮከቦች እና በ NPM ላይ 331 ሳምንታዊ ውርዶች አሉት።

 

4. Bootstrap Vue

 

BootstrapVue፣ በBootstrapVue Vue.js እና ታዋቂውን የፊት-መጨረሻ CSS ቤተ-መጽሐፍትን በመጠቀም ምላሽ ሰጪ፣ ሞባይል-መጀመሪያ እና ARIA ተደራሽ የሆኑ ፕሮጀክቶችን በድሩ ላይ መገንባት ትችላለህ - ቡትስትራፕ። ሰነዱ ለመረዳት ቀላል እና ለማዋቀር ቀላል ነው. የፊት-ፍጻሜ አተገባበርን በፍጥነት ያከናውናል.

 

ከ85+ ክፍሎች፣ ከ45 በላይ የሚገኙ ተሰኪዎች፣ በርካታ መመሪያዎች እና 1000+ አዶዎችን ያቀርባል። እንዲሁም ለአቀማመጦች እና ምላሽ ሰጪ ዲዛይን የተዘጋጁ ተግባራዊ ክፍሎችን ያቀርባል. የNuxt.js ሞጁሉን በመጠቀም BootstrapVueን ከNuxt.js ፕሮጀክቶችዎ ጋር በቀላሉ ማዋሃድ ይችላሉ።

 

እንዲሁም የቡትስትራፕ ሲኤስኤስ ማዕቀፍ ጥቅም ላይ እንደሚውል በተመሳሳይ መንገድ ጥቅም ላይ ይውላል። ወደ 12.9ሺህ የሚጠጉ ኮከቦች እና 1.7ሺ ሹካዎች ያለው በ Github ላይ ክፍት-ምንጭ ነው።

 

5. Vuesax

 

Vuesax በቀላሉ ፕሮጄክቶችን ለመስራት እና ልዩ በሆነ እና በሚያስደስት ዘይቤ በVuejs የተፈጠረ አዲስ የዩአይ አካል ማዕቀፍ ነው ፣ vuesax ከባዶ የተፈጠረ እና ለሁሉም አይነት ገንቢዎች ከግንባር ፍቅረኛ እስከ ደጋፊ ድረስ በቀላሉ የእይታ አቀራረባቸውን መፍጠር ለሚፈልጉ ገንቢዎች የተሰራ ነው። የመጨረሻው ተጠቃሚ. ዲዛይኖቹ ለእያንዳንዱ አካል ልዩ ናቸው እና ከማንኛውም የእይታ አዝማሚያዎች ወይም የንድፍ ህጎች ጋር አልተጣመሩም ፣ ይህም አብሮ የተሰሩ ፕሮጀክቶችን ልዩ ያደርጋቸዋል።

 

ምላሽ ሰጪ ገጾችን እና እንደገና ጥቅም ላይ ሊውሉ የሚችሉ እና ሊበጁ የሚችሉ የUI ክፍሎችን ያቀርባል። እንዲሁም በ npm ወይም CDN በመጠቀም ለመጀመር ቀላል ነው። በአሁኑ ጊዜ Vue CLI 3ን በቅርብ ጊዜ ስሪት አይደግፍም። በ Github ላይ ወደ 4.9k ከዋክብት እና 6700 ሳምንታዊ ውርዶች NPM ያለው ክፍት ምንጭ ነው።

 

6. የጉንዳን ዲዛይን Vue

 

Ant Design vue በ Ant Design Specification ላይ የተመሰረተ፣ Ant design vue የበለጸጉ እና በይነተገናኝ የተጠቃሚ በይነገጽ ለመገንባት ከፍተኛ ጥራት ያላቸውን ክፍሎች እና ማሳያዎችን የያዘ የቪዩዩአይ ቤተ-መጽሐፍት ነው።

 

Ant-design-vue እንደ Skeleton፣ መሳቢያ፣ ስታቲስቲክስ እና ሌሎችም ያሉ የድር መተግበሪያዎችህን ለማበልጸግ ብዙ የUI ክፍሎች ያቀርባል።

 

በቅርብ ጊዜ የተለቀቀው የAnt design vue ስሪት 2፣ ለመዋሃድ ፈጣን እና ቀላል እንዲሆን ተዘምኗል፣ አነስተኛ የጥቅል መጠን እና እንዲሁም Vue 3፣ New Compposition API ሰነድን ይደግፋል። እንዲሁም ዘመናዊ የድር አሳሾችን፣ የአገልጋይ ጎን ቀረጻ እና ኤሌክትሮን ይደግፋል። በ Github እና በ13 ሳምንታዊ ውርዶች NPM ላይ ከ39,693k በላይ ኮከቦች አሉት።

 

7. ኳሳር

 

Quasar ገንቢዎች አንድ ምንጭ ኮድ ቤዝ ለሁሉም መድረኮች በQuasar CLI በኩል ከሳጥኑ ውጭ ካሉ ምርጥ ልምዶች ጋር እንዲጠቀሙ ከሚያስችላቸው ምርጥ የVue UI ማዕቀፎች አንዱ ነው። ገንቢዎች በዙሪያው ካሉ ሌሎች የቦይለር ፕላስቲኮች (የግንባታ ስርዓት፣ አቀማመጥ) ይልቅ በመተግበሪያቸው ይዘት ላይ እንዲያተኩሩ ያስችላቸዋል። የቁሳቁስ 2.0 መመሪያዎችን በመከተል ላይ ያተኮረ እና በጣም ደጋፊ ማህበረሰብም አለው።

 

ስለ Quasar ልዩ ከሆኑት ነገሮች አንዱ ኮድን አንድ ጊዜ የመፃፍ ችሎታ እና በተመሳሳይ ጊዜ እንደ ድር ጣቢያ ማሰማራት ፣ የሞባይል መተግበሪያ አንድ ኮድ ቤዝ ብቻ በመጠቀም። እንዲሁም በአሁኑ ጊዜ በቅድመ-ይሁንታ ውስጥ vu 3 ባህሪያትን የሚደግፍ አዲስ ስሪት አለ። በ Github ላይ 17.8k ያህል ኮከቦች አሉት።

 

8. ቡፊ

 

Buefy Bulma (የCSS ማዕቀፍ) ላይ የተመሰረተ ለVue JS ቀላል ክብደት ያለው የUI ክፍሎች ቤተ-መጽሐፍት ነው። Buefy ቡልማን ከ Vue ጋር በማዋሃድ አነስተኛ ኮድ በመጠቀም ቆንጆ አፕሊኬሽኖችን እንዲገነቡ ያግዝዎታል። ለእርስዎ Bulma በይነገጽ የጃቫስክሪፕት ንብርብር ነው።

 

በተለመደው ድረ-ገጽ ላይ ሙሉ ለሙሉ ወይም ነጠላ አካላት ሊመጣ ይችላል. በፕሮጀክትዎ ውስጥ ማዋሃድ በጣም ቀላል ነው፣ ወይም npm ወይም CDN በመጠቀም ሊከናወን ይችላል።

 

Buefy ዝግጁ የሆኑ የUI ክፍሎች፣ አቀማመጥ እና አዶዎችን ያቀርባል። ክፍሎቹ SASS ን ወደ ጭብጥዎ ሊጠቀሙ ይችላሉ። እንዲሁም ዘመናዊ አሳሾችን ይደግፋል.

 

9. Vue Material

 

Vue Material በስፋት ጥቅም ላይ የዋለ፣ ቀላል ክብደት ያለው የቁሳቁስ ንድፍ ዝርዝር መግለጫዎችን ተግባራዊ የሚያደርግ ነው። በVue.js እና በቁሳዊ ንድፍ ዝርዝሮች መካከል ካሉት ምርጥ ውህደት አንዱ ነው! በቀላል ኤፒአይ በኩል ሁሉንም ፍላጎቶችዎን እንዲያሟላ በቀላሉ ማዋቀር ይችላሉ።

 

ለሁሉም ዘመናዊ የድር አሳሾች ምላሽ ከሚሰጥ ንድፍ እና ድጋፍ ጋር ተኳሃኝ ነው። ቤተ መፃህፍቱ በገጽታዎች፣ ክፍሎች እና UI Elements ተከፍሏል። ጭብጡ የመተግበሪያዎን ጭብጥ (ወይም የራስዎን ገጽታዎች እንዴት እንደሚጽፉ) እና አካላት እና UI Elements አቀማመጦችን፣ አሰሳን፣ የፊደል አጻጻፍን፣ አዶዎችን እና 30 ተጨማሪ አካላትን ያቀፈ መመሪያን ይሰጣል። በ Github ላይ ወደ 9.2k ኮከቦች እና 1.1k ሹካዎች እና 21k + ሳምንታዊ NPM ውርዶች አሉት።

 

10. KeenUI

 

KeenUI ቀላል ክብደት ያለው vue.js UI ቤተ-መጽሐፍት ሲሆን በGoogle ቁስ ንድፍ አነሳሽነት በቀላል ኤፒአይ ነው። ኪን UI የCSS ማዕቀፍ አይደለም። ስለዚህ፣ ለግሪድ ሲስተም፣ ለታይፕግራፊ፣ ወዘተ ስታይል አያካትትም። ይልቁንም ትኩረቱ ጃቫስክሪፕት የሚያስፈልጋቸው በይነተገናኝ አካላት ላይ ነው።

 

እንደገና ጥቅም ላይ ሊውሉ የሚችሉ 30 ያህል ክፍሎች አሉት። ክፍሎቹ SASS ተለዋዋጮችን በመጠቀም ቅጦችን በመሻር ሊበጁ ይችላሉ። ሲዲኤንን ወይም npmን በመጠቀም ወደ ፕሮጄክትዎ ሊያዋህዱት ይችላሉ። ምንጩ ክፍት ነው እና በ Github ላይ ወደ 4k የሚጠጉ ኮከቦች አሉት።

 

መደምደሚያ

 

የዩአይ አካል ቤተ-መጽሐፍት በእርግጠኝነት አንድን ፕሮጀክት መገንባት በጣም ቀላል ያደርገዋል። ትክክለኛውን መምረጥ በሚፈልጉት የፕሮጀክቱ ገፅታዎች ላይ የተመሰረተ ነው. ወደ አዲስ ፕሮጀክት ከመግባትዎ በፊት፣ ለዓላማው በጣም የሚስማማውን የUI ክፍሎች ቤተ-መጽሐፍትን መከለስ ጥሩ ነው።