Vue JS သည် စာမျက်နှာတစ်ခုတည်း အပလီကေးရှင်းများ (SPAs) နှင့် User Interfaces များကို ဖွံ့ဖြိုးတိုးတက်စေရန် အသုံးပြုသည့် တိုးတက်သော JavaScript မူဘောင်တစ်ခုဖြစ်သည်။ ၎င်းသည် အပြင်တွင် အသုံးများဆုံး front-end framework များထဲမှ တစ်ခုဖြစ်သည်။

 

Vue ၏ စိတ်ဝင်စားဖွယ် အင်္ဂါရပ်တစ်ခုမှာ ဝဘ်စာမျက်နှာတစ်ခုကို မတူညီသော အစိတ်အပိုင်းများအဖြစ် ခွဲထုတ်နိုင်သည့် စွမ်းရည်ဖြစ်သည်။ UI အစိတ်အပိုင်း စာကြည့်တိုက်များကို အသုံးပြုခြင်းဖြင့် ဤလုပ်ငန်းစဉ်သည် ပိုမိုရိုးရှင်းပါသည်။

 

အစိတ်အပိုင်းများကို လွယ်ကူလျင်မြန်စွာ ဖန်တီးပေးနိုင်သော UI အစိတ်အပိုင်း စာကြည့်တိုက်များ ရှိပါသည်။ ထို့ကြောင့် ဤဘလော့ဂ်တွင်၊ ကျွန်ုပ်တို့သည် 10 ခုနှစ်အတွက် ထိပ်တန်း 2021 Vue UI Component Libraries ကို ပြန်လည်သုံးသပ်ပါမည်။

 

1. PrimeVue

 

PrimeVue သည် ရိုးရှင်းသော၊ စွယ်စုံရနှင့် စွမ်းဆောင်နိုင်သော Vue UI အစိတ်အပိုင်းစာကြည့်တိုက်တစ်ခုဖြစ်ပြီး သင့်အား အံ့သြဖွယ်ကောင်းသော အသုံးပြုသူအင်တာဖေ့စ်များတည်ဆောက်ရန် ကူညီပေးသည့်တစ်ခုဖြစ်သည်။

 

Web Content Accessibility Guidelines (WCAG) နှင့် တုံ့ပြန်မှုဒီဇိုင်းအတွက် အပြည့်အဝပံ့ပိုးမှုဖြင့် 80+ UI အစိတ်အပိုင်းများပါရှိသည်။ မကြာသေးမီက အပ်ဒိတ်ကြောင့်၊ စာကြည့်တိုက်သည် ယခုအခါ Vue 3 အတွက် အပြည့်အဝ ပံ့ပိုးမှု ရရှိနေပြီဖြစ်သည်။ ၎င်းတွင် အစိတ်အပိုင်းများ အများအပြားလည်း ရရှိထားသည်။

 

Primevue ၏အကောင်းဆုံးအရာများထဲမှတစ်ခုမှာ၎င်း၏ကျယ်ပြန့်သောအစိတ်အပိုင်းများဖြစ်သည်။ ၎င်းတို့သည် ဇယားများနှင့် ပေဂျင်ပေးသူများမှ သင်အပြန်အလှန်အကျိုးသက်ရောက်သော Vue အက်ပ်များကို ဖန်တီးရန် အသုံးပြုနိုင်သည့် ကောင်းမွန်စွာဖန်တီးထားသော ဂရပ်အခြေပြုအဖွဲ့အစည်းဇယားများအထိ ပါဝင်သည်။ ၎င်းသည် open-source ဖြစ်ပြီး Github တွင် ကြယ် 1k+ နှင့် NPM တွင် အပတ်စဉ် ဒေါင်းလုဒ်ပေါင်း 6,983 ရှိသည်။

 

2. အတည်ပြုပါ။

 

Vuetify သည် Material Design သတ်မှတ်ချက်ကိုအသုံးပြုသည့် လှပသောလက်ဖြင့်ပြုလုပ်ထားသောအစိတ်အပိုင်းများပါရှိသော Vue UI Library တစ်ခုဖြစ်သည်။ ဆိုလိုသည်မှာ ၎င်းသည် အစိတ်အပိုင်းတိုင်းကို မော်ဂျူလာ၊ တုံ့ပြန်မှုနှင့် စွမ်းဆောင်ရည်ရှိစေရန် စေ့စပ်သေချာစွာ ဖန်တီးထားသည့် Material Design သတ်မှတ်ချက်များနှင့်အညီ အတိအကျ တီထွင်ထားခြင်းဖြစ်သည်ဟု ဆိုလိုသည်။

 

Vuetify သည် သင့်အပလီကေးရှင်းများကို တမူထူးခြားပြီး တက်ကြွသော အပြင်အဆင်များဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပြီး SASS ကိန်းရှင်များကို အသုံးပြုကာ သင့်အစိတ်အပိုင်းများ၏ စတိုင်များကို ပြီးပြည့်စုံစေပါသည်။

 

၎င်းသည် ဝင်ရောက်နိုင်မှုလမ်းညွှန်ချက်များ၊ ခေတ်မီဘရောက်ဆာများအားလုံးကိုလည်း ပံ့ပိုးပေးပြီး Vue CLI-3 နှင့် တွဲဖက်အသုံးပြုနိုင်ပါသည်။ ပေါင်းစည်းရန် လွယ်ကူပြီး အဝိုင်းလေး၊ လမ်းကြောင်းပြမှုများ နှင့် ကတ်များကဲ့သို့ ပြန်သုံးနိုင်သော UI အစိတ်အပိုင်းများစွာ ပါရှိသည်။ Vuetify သည် open source ဖြစ်ပြီး Github တွင် ကြယ် 29k ကျော်နှင့် NPM တွင် အပတ်စဉ် ဒေါင်းလုဒ် 319,170 ရှိသည်။

 

3. Chakra UI Vue

 

Chakra UI သည် သင့်အား Vue အပလီကေးရှင်းများကို လျင်မြန်လွယ်ကူစွာ တည်ဆောက်ရန် ကိရိယာများကို ပေးဆောင်သည့် ရိုးရှင်းသော မော်ဂျူလာနှင့် ဝင်ရောက်နိုင်သော အစိတ်အပိုင်းစာကြည့်တိုက်တစ်ခုဖြစ်သည်။

 

အစိတ်အပိုင်းအားလုံးကို အသုံးပြု၍ရနိုင်သည် (၎င်းသည် WAI-ARIA စံနှုန်းများကို တင်းကြပ်စွာ လိုက်နာသည်)၊ အပြင်အဆင်နှင့် ပေါင်းစပ်နိုင်သော၊ ၎င်းသည် ဘောက်စ်ပြင်ပမှ တုံ့ပြန်မှုပုံစံများကို ပံ့ပိုးပေးပြီး အမှောင်မုဒ်တွင် တွဲဖက်အသုံးပြုနိုင်သည်။

 

Chakra UI တွင် props များဖြတ်သွားခြင်းဖြင့် သင်၏အစိတ်အပိုင်းများကို ပုံစံဆင်ရန် လွယ်ကူစေသည့် CBox နှင့် CStack ကဲ့သို့သော အပြင်အဆင် အစိတ်အပိုင်းများပါရှိသည်။ ၎င်းသည် webpack plugin ဖြေရှင်းချက်ကို အသုံးပြု၍ Chakra UI Vue အစိတ်အပိုင်းများကို အလိုအလျောက်တင်သွင်းနိုင်သည်။ ၎င်းသည် open-source ဖြစ်ပြီး Github တွင် ကြယ် 900+ နှင့် NPM တွင် အပတ်စဉ် 331 ဒေါင်းလုဒ်များ ရှိသည်။

 

4. Bootstrap Vue

 

BootstrapVue၊ BootstrapVue ဖြင့် သင်သည် Vue.js နှင့် နာမည်ကြီး front-end CSS စာကြည့်တိုက် — Bootstrap ကို အသုံးပြု၍ ဝဘ်ပေါ်တွင် တုံ့ပြန်မှုရှိသော၊ မိုဘိုင်း-ပထမနှင့် ARIA အသုံးပြုနိုင်သော ပရောဂျက်များကို တည်ဆောက်နိုင်သည်။ စာရွက်စာတမ်းသည် နားလည်ရလွယ်ကူပြီး တပ်ဆင်ရန်လည်း လွယ်ကူပါသည်။ ၎င်းသည် front-end အကောင်အထည်ဖော်မှုများကို ပိုမိုမြန်ဆန်စေသည်။

 

၎င်းတွင် အစိတ်အပိုင်းပေါင်း 85+၊ ရရှိနိုင်သော ပလပ်အင် 45 ခုကျော်၊ လမ်းညွှန်ချက်များစွာနှင့် အိုင်ကွန် 1000+ တို့ကို ပေးဆောင်ပါသည်။ အပြင်အဆင်များနှင့် တုံ့ပြန်မှုရှိသော ဒီဇိုင်းအတွက် အံဝင်ခွင်ကျဖြစ်စေသော လုပ်ဆောင်ချက်ဆိုင်ရာ အစိတ်အပိုင်းများကိုလည်း ပံ့ပိုးပေးပါသည်။ Nuxt.js module ကို အသုံးပြု၍ သင်၏ Nuxt.js ပရောဂျက်များတွင် BootstrapVue ကို အလွယ်တကူ ပေါင်းစပ်နိုင်သည်။

 

၎င်းကို bootstrap CSS framework ကိုအသုံးပြုနေသကဲ့သို့ပင် ၎င်းကိုအသုံးပြုသည်။ ကြယ် 12.9k နှင့် ခက်ရင်း 1.7k ခန့်ပါရှိသော Github တွင် ၎င်းသည် open-sourced ဖြစ်သည်။

 

5. Vuesax

 

Vuesax သည် ပရောဂျက်များကို အလွယ်တကူ ဖန်တီးနိုင်ရန် Vuesax နှင့် ဖန်တီးထားသော UI အစိတ်အပိုင်းဘောင်အသစ်ဖြစ်ပြီး၊ ထူးခြားပြီး နှစ်သက်ဖွယ်ကောင်းသော ပုံစံဖြင့်၊ vuesax သည် ရှေ့တန်းကို ချစ်မြတ်နိုးသူမှ နောက်ကွယ်သို့ အလွယ်တကူ ဖန်တီးလိုသော developer အမျိုးအစားအားလုံးအတွက် ဒီဇိုင်းထုတ်ထားသည်။ အသုံးပြုသူ။ ဒီဇိုင်းများသည် အစိတ်အပိုင်းတစ်ခုစီအတွက် တစ်မူထူးခြားပြီး မည်သည့်အမြင်နှင့်မျှ ခေတ်ရေစီးကြောင်းများ သို့မဟုတ် ဒီဇိုင်းစည်းမျဉ်းများနှင့် မကိုက်ညီသောကြောင့် ၎င်းနှင့်တည်ဆောက်ထားသော ပရောဂျက်များကို ထူးခြားစေသည်။

 

၎င်းသည် တုံ့ပြန်မှုရှိသော စာမျက်နှာများနှင့် ပြန်လည်အသုံးပြု၍ စိတ်ကြိုက်ပြင်ဆင်နိုင်သော UI အစိတ်အပိုင်းများကို ပေးဆောင်ပါသည်။ npm သို့မဟုတ် CDN ကိုအသုံးပြုခြင်းဖြင့်စတင်ရန်လည်းလွယ်ကူသည်။ ၎င်းသည် လတ်တလောဗားရှင်းတွင် Vue CLI 3 ကို လောလောဆယ် မပံ့ပိုးပါ။ ၎င်းသည် 4.9k ကြယ်ပွင့်များနှင့် အပတ်စဉ် NPM ဒေါင်းလုဒ်ပေါင်း 6700 ခန့်ရှိသော Github တွင် open-sourced ဖြစ်သည်။

 

6. ပုရွက်ဆိတ်ဒီဇိုင်း Vue

 

Ant Design သတ်မှတ်ချက်အပေါ် အခြေခံ၍ Ant Design vue၊ Ant ဒီဇိုင်း vue သည် ကြွယ်ဝပြီး အပြန်အလှန်အကျိုးပြုသော အသုံးပြုသူ အင်တာဖေ့စ်များကို တည်ဆောက်ရန်အတွက် အရည်အသွေးမြင့် အစိတ်အပိုင်းများနှင့် နမူနာအစုံပါရှိသော vue UI စာကြည့်တိုက်တစ်ခုဖြစ်သည်။

 

Ant-design-vue သည် သင်၏ဝဘ်အပလီကေးရှင်းများဖြစ်သော Skeleton၊ အံဆွဲ၊ စာရင်းအင်းနှင့် အခြားအရာများကဲ့သို့ ကြွယ်ဝလာစေရန် UI အစိတ်အပိုင်းများစွာကို ပံ့ပိုးပေးပါသည်။

 

ပုရွက်ဆိတ်ဒီဇိုင်း vue ဗားရှင်း 2 ၏ မကြာသေးမီက ထွက်ရှိလာသဖြင့် ၎င်းအား ပေါင်းစည်းရန် ပိုမိုမြန်ဆန်လွယ်ကူစေရန်၊ အစုအဝေးအရွယ်အစားသေးငယ်စေရန်နှင့် Vue 3၊ New Composition API စာရွက်စာတမ်းကိုလည်း ပံ့ပိုးပေးထားပါသည်။ ၎င်းသည် ခေတ်မီဝဘ်ဘရောက်ဆာများ၊ ဆာဗာဘက်ခြမ်းပုံဖေါ်ခြင်းနှင့် အီလက်ထရွန်တို့ကိုလည်း ပံ့ပိုးပေးပါသည်။ Github တွင် ကြယ်ပေါင်း 13k ကျော်ရှိပြီး အပတ်စဉ် ဒေါင်းလုဒ် 39,693 NPM ရှိသည်။

 

7. Quasar

 

Quasar သည် Quasar CLI မှတဆင့် ပလက်ဖောင်းအားလုံးအတွက် developer များအား အရင်းအမြစ်ကုဒ်အခြေခံတစ်ခုတည်းကို အသုံးပြုခွင့်ပေးသည့် အကောင်းဆုံး Vue UI မူဘောင်များထဲမှ တစ်ခုဖြစ်သည်။ ၎င်းသည် အခြားဘွိုင်လာထည့်သည့်အရာများ (တည်ဆောက်မှုစနစ်၊ အပြင်အဆင်) ထက် ၎င်းတို့၏ App ၏အကြောင်းအရာကို ဆော့ဖ်ဝဲအင်ဂျင်နီယာများကို အာရုံစိုက်နိုင်စေပါသည်။ ၎င်းသည် Material 2.0 လမ်းညွှန်ချက်များကို လိုက်နာရန် အာရုံစိုက်ထားပြီး အလွန်ပံ့ပိုးပေးသည့် အသိုင်းအဝန်းတစ်ခုလည်း ရှိသည်။

 

Quasar ၏ထူးခြားသောအချက်တစ်ခုမှာ codebase တစ်ခုတည်းကိုအသုံးပြု၍ website တစ်ခု၊ Mobile App တစ်ခုအဖြစ်၎င်းကိုတစ်ကြိမ်တည်းဖြင့်တစ်ပြိုင်နက်အသုံးပြုနိုင်သောကုဒ်ကိုရေးသားနိုင်ခြင်းဖြစ်သည်။ vue 3 အင်္ဂါရပ်များကို ပံ့ပိုးပေးမည့် လက်ရှိ beta တွင် ဗားရှင်းအသစ်လည်းရှိပါသည်။ Github တွင် ကြယ် 17.8k ခန့်ရှိသည်။

 

8. Buefy

 

Buefy သည် Bulma(CSS framework) ကိုအခြေခံ၍ Vue JS အတွက်ပေါ့ပါးသော UI အစိတ်အပိုင်းစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ Buefy သည် Bulma ကို Vue နှင့် ပေါင်းစပ်ထားပြီး အနည်းငယ်မျှသာသောကုဒ်ကို အသုံးပြု၍ ကြည့်ကောင်းသော အပလီကေးရှင်းများကို ဖန်တီးပေးသည်။ ၎င်းသည် သင်၏ Bulma အင်တာဖေ့စ်အတွက် javascript အလွှာဖြစ်သည်။

 

၎င်းကို လုံး၀ သို့မဟုတ် သာမန်ဝဘ်စာမျက်နှာတစ်ခုတွင် အစိတ်အပိုင်းတစ်ခုတည်းကို တင်သွင်းနိုင်သည်။ ၎င်းကို သင်၏ပရောဂျက်တွင် ပေါင်းစည်းခြင်းသည် အလွန်လွယ်ကူသည်၊ npm သို့မဟုတ် CDN ကို အသုံးပြု၍ သော်လည်းကောင်း လုပ်ဆောင်နိုင်သည်။

 

Buefy သည် အဆင်သင့်လုပ်ထားသည့် UI အစိတ်အပိုင်းများ၊ အပြင်အဆင်နှင့် အိုင်ကွန်များကို ပံ့ပိုးပေးသည်။ အစိတ်အပိုင်းများသည် သင့်အပြင်အဆင်အတွက် SASS ကို အသုံးပြုနိုင်သည်။ ၎င်းသည် ခေတ်မီဘရောက်ဆာများကိုလည်း ပံ့ပိုးပေးသည်။

 

9. Vue ရုပ်ဝတ္ထု

 

Vue Material သည် Material Design သတ်မှတ်ချက်များကို အကောင်အထည်ဖော်သည့် ကျယ်ကျယ်ပြန့်ပြန့်အသုံးပြုပြီး ပေါ့ပါးသောဘောင်တစ်ခုဖြစ်သည်။ ၎င်းသည် Vue.js နှင့် Material Design specs များကြားတွင် အကောင်းဆုံးပေါင်းစပ်မှုတစ်ခုဖြစ်သည်။ လွယ်ကူသော API မှတဆင့် သင့်လိုအပ်ချက်အားလုံးကို လိုက်လျောညီထွေဖြစ်စေရန် ၎င်းကို အလွယ်တကူ configure လုပ်နိုင်ပါသည်။

 

၎င်းသည် ခေတ်မီဝဘ်ဘရောက်ဆာများအားလုံးအတွက် တုံ့ပြန်မှုပုံစံနှင့် ပံ့ပိုးမှုတို့ဖြင့် တွဲဖက်အသုံးပြုနိုင်ပါသည်။ စာကြည့်တိုက်ကို Themes၊ အစိတ်အပိုင်းများနှင့် UI Elements များအဖြစ် ပိုင်းခြားထားသည်။ themes များသည် သင့်အပလီကေးရှင်း၏အခင်းအကျင်း (သို့မဟုတ် သင့်ကိုယ်ပိုင်အပြင်အဆင်များရေးရန်) နှင့် အစိတ်အပိုင်းများနှင့် UI Elements များတွင် အပြင်အဆင်များ၊ လမ်းညွှန်ချက်၊ စာစီစာရိုက်၊ အိုင်ကွန်များနှင့် အခြားအစိတ်အပိုင်း 30 ပါ၀င်သည် ။ ၎င်းတွင် Github တွင် 9.2k ကြယ်များနှင့် 1.1k forks နှင့် 21k + အပတ်စဉ် NPM ဒေါင်းလုဒ်များရှိသည်။

 

10. KeenUI

 

KeenUI သည် ပေါ့ပါးသော vue.js UI စာကြည့်တိုက်ဖြစ်ပြီး Google ၏ Material Design မှ လှုံ့ဆော်ပေးသော ရိုးရှင်းသော API တစ်ခုဖြစ်သည်။ Keen UI သည် CSS framework မဟုတ်ပါ။ ထို့ကြောင့်၊ ဇယားကွက်စနစ်၊ စာစီစာရိုက်၊ စသည်တို့အတွက် စတိုင်များ မပါဝင်ပါ။ ယင်းအစား၊ Javascript လိုအပ်သော အပြန်အလှန်အကျိုးပြုသော အစိတ်အပိုင်းများကို အာရုံစိုက်ထားသည်။

 

၎င်းတွင် ပြန်သုံးနိုင်သော အစိတ်အပိုင်း 30 ခန့်ရှိသည်။ SASS ကိန်းရှင်များကို အသုံးပြု၍ စတိုင်များကို လွှမ်းမိုးခြင်းဖြင့် အစိတ်အပိုင်းများကို စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ CDN သို့မဟုတ် npm ကို အသုံးပြု၍ ၎င်းကို သင့်ပရောဂျက်တွင် ပေါင်းစပ်နိုင်သည်။ ၎င်းသည် open-sourced ဖြစ်ပြီး Github တွင် ကြယ် 4k ခန့်ရှိသည်။

 

ကောက်ချက်

 

UI အစိတ်အပိုင်း စာကြည့်တိုက်များသည် ပရောဂျက်တစ်ခုကို တည်ဆောက်ရာတွင် ပိုမိုလွယ်ကူစေသည်မှာ သေချာပါသည်။ မှန်ကန်သောတစ်ခုကို ရွေးချယ်ခြင်းသည် သင်လုပ်ဆောင်လိုသော ပရောဂျက်၏ အင်္ဂါရပ်များပေါ်တွင် မူတည်ပါသည်။ ပရောဂျက်အသစ်တစ်ခုသို့ မပါဝင်မီ၊ ရည်ရွယ်ချက်အတွက် အသင့်တော်ဆုံးဖြစ်သည့် UI အစိတ်အပိုင်းစာကြည့်တိုက်ကို ပြန်လည်သုံးသပ်ရန် အကြံပြုလိုပါသည်။