Vue JS គឺជាក្របខ័ណ្ឌ JavaScript រីកចម្រើនដែលត្រូវបានប្រើដើម្បីអភិវឌ្ឍកម្មវិធីទំព័រតែមួយ (SPAs) និងចំណុចប្រទាក់អ្នកប្រើប្រាស់។ ហើយ​វា​ជា​ស៊ុម​ផ្នែក​ខាង​មុខ​ដែល​គេ​ប្រើ​យ៉ាង​ទូលំទូលាយ​បំផុត​នៅ​ទីនោះ។

 

លក្ខណៈពិសេសគួរឱ្យចាប់អារម្មណ៍មួយរបស់ Vue គឺសមត្ថភាពរបស់វាក្នុងការបំបែកគេហទំព័រទៅជាសមាសធាតុផ្សេងៗ។ ហើយដំណើរការនេះកាន់តែងាយស្រួលជាមួយនឹងការប្រើប្រាស់បណ្ណាល័យសមាសភាគ UI ។

 

មានបណ្ណាល័យសមាសធាតុ UI ជាច្រើនដែលអាចជួយអ្នកបង្កើតសមាសធាតុបានយ៉ាងងាយស្រួល និងរហ័ស។ ដូច្នេះនៅក្នុងប្លុកនេះ យើងនឹងពិនិត្យមើលបណ្ណាល័យសមាសធាតុ Vue UI កំពូលទាំង 10 សម្រាប់ឆ្នាំ 2021។

 

1. PrimeVue

 

PrimeVue គឺជាបណ្ណាល័យសមាសធាតុ Vue UI ដែលមានលក្ខណៈសាមញ្ញ ប្រើបានច្រើន និងដំណើរការ ដែលជួយអ្នកបង្កើតចំណុចប្រទាក់អ្នកប្រើដ៏អស្ចារ្យ។

 

វាមានសមាសធាតុ UI ជាង 80+ ជាមួយនឹងការគាំទ្រពេញលេញសម្រាប់គោលការណ៍ណែនាំលទ្ធភាពប្រើប្រាស់មាតិកាគេហទំព័រ (WCAG) និងការរចនាឆ្លើយតប។ ហើយអរគុណចំពោះការអាប់ដេតថ្មីៗ បណ្ណាល័យឥឡូវនេះមានការគាំទ្រពេញលេញសម្រាប់ Vue 3។ វាក៏ទទួលបានសមាសធាតុជាច្រើនទៀតផងដែរ។

 

រឿងដ៏ល្អបំផុតមួយអំពី Primevue គឺសមាសធាតុដ៏ធំទូលាយរបស់វា។ ពួកវាមានចាប់ពីតារាង និងអ្នកសរសេរទំព័ររហូតដល់គំនូសតាងអង្គការដែលមានមូលដ្ឋានលើក្រាហ្វដែលបានបង្កើតយ៉ាងល្អ ដែលអ្នកអាចប្រើដើម្បីបង្កើតកម្មវិធី Vue អន្តរកម្ម។ វាជាប្រភពបើកចំហ និងមានផ្កាយ 1k+ នៅលើ Github និងការទាញយក 6,983 ប្រចាំសប្តាហ៍នៅលើ NPM ។

 

2. បញ្ជាក់

 

Vuetify គឺជាបណ្ណាល័យ Vue UI ដែលមានធាតុផ្សំធ្វើដោយដៃយ៉ាងស្រស់ស្អាត ដែលប្រើការបញ្ជាក់នៃការរចនាសម្ភារៈ។ នេះមានន័យថា វាត្រូវបានបង្កើតឡើងយ៉ាងពិតប្រាកដ ស្របតាមលក្ខណៈបច្ចេកទេសនៃការរចនាសម្ភារៈ ជាមួយនឹងរាល់សមាសធាតុដែលបានបង្កើតយ៉ាងល្អិតល្អន់ដើម្បីឱ្យមានលក្ខណៈម៉ូឌុល ឆ្លើយតប និងដំណើរការ។

 

Vuetify អនុញ្ញាតឱ្យអ្នកប្ដូរកម្មវិធីរបស់អ្នកតាមបំណងជាមួយនឹងប្លង់តែមួយគត់ និងថាមវន្ត និងធ្វើឱ្យរចនាប័ទ្មនៃសមាសធាតុរបស់អ្នកល្អឥតខ្ចោះដោយប្រើអថេរ SASS ។

 

វាក៏គាំទ្រការណែនាំអំពីភាពងាយស្រួលផងដែរ កម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបទាំងអស់ និងអាចប្រើបានជាមួយ Vue CLI-3។ វាងាយស្រួលក្នុងការរួមបញ្ចូល និងមានសមាសធាតុ UI ដែលអាចប្រើឡើងវិញបានជាច្រើនដូចជា រង្វង់មូល ការរុករក និងកាត។ Vuetify គឺជាប្រភពបើកចំហ និងមានផ្កាយជាង 29k នៅលើ Github និងការទាញយក 319,170 ប្រចាំសប្តាហ៍នៅលើ NPM ។

 

3. ចក្រា UI Vue

 

Chakra UI គឺជាបណ្ណាល័យសមាសធាតុម៉ូឌុលសាមញ្ញ និងអាចចូលប្រើបាន ដែលផ្តល់ឱ្យអ្នកនូវឧបករណ៍សម្រាប់បង្កើតកម្មវិធី Vue យ៉ាងរហ័ស និងងាយស្រួល។

 

សមាសធាតុទាំងអស់អាចចូលប្រើបាន (វាអនុវត្តតាមស្តង់ដារ WAI-ARIA យ៉ាងតឹងរ៉ឹង) អាចដាក់តាមប្រធានបទ និងអាចផ្សំបាន។ វាគាំទ្ររចនាប័ទ្មឆ្លើយតបចេញពីប្រអប់ ហើយត្រូវគ្នានឹងទម្រង់ងងឹត។

 

Chakra UI ក៏មានសំណុំនៃធាតុផ្សំនៃប្លង់ដូចជា CBox និង CStack ដែលធ្វើឱ្យវាងាយស្រួលធ្វើរចនាប័ទ្មសមាសធាតុរបស់អ្នកដោយឆ្លងកាត់ឧបករណ៍។ វាក៏អនុញ្ញាតឱ្យអ្នកនាំចូលសមាសធាតុ Chakra UI Vue ដោយស្វ័យប្រវត្តិដោយប្រើដំណោះស្រាយកម្មវិធីជំនួយ webpack ។ វាជាប្រភពបើកចំហ និងមានផ្កាយ 900+ នៅលើ Github និងការទាញយក 331 ប្រចាំសប្តាហ៍នៅលើ NPM ។

 

4. Bootstrap Vue

 

BootstrapVue ជាមួយនឹង BootstrapVue អ្នកអាចបង្កើតគម្រោងឆ្លើយតប ទូរស័ព្ទចល័តដំបូង និង ARIA ដែលអាចចូលប្រើបាននៅលើគេហទំព័រដោយប្រើ Vue.js និងបណ្ណាល័យ CSS ផ្នែកខាងមុខដ៏ពេញនិយម — Bootstrap ។ ឯកសារងាយស្រួលយល់ ហើយវាក៏ងាយស្រួលក្នុងការរៀបចំផងដែរ។ វាធ្វើឱ្យការអនុវត្តផ្នែកខាងមុខធ្វើបានលឿនជាងមុន។

 

វាផ្តល់នូវសមាសធាតុ 85+ ជាង 45 កម្មវិធីជំនួយដែលមាន ការណែនាំជាច្រើន និង 1000+ រូបតំណាង។ វាក៏ផ្តល់នូវសមាសធាតុមុខងារដែលតម្រូវសម្រាប់ប្លង់ និងការរចនាឆ្លើយតបផងដែរ។ អ្នកក៏អាចរួមបញ្ចូល BootstrapVue យ៉ាងងាយស្រួលទៅក្នុងគម្រោង Nuxt.js របស់អ្នកដោយប្រើម៉ូឌុល Nuxt.js ។

 

វា​ក៏​ត្រូវ​បាន​ប្រើ​ដូច​គ្នា​នឹង​ក្របខ័ណ្ឌ CSS bootstrap កំពុង​ត្រូវ​បាន​ប្រើ។ វាត្រូវបានប្រភពបើកចំហនៅលើ Github ដែលមានផ្កាយប្រហែល 12.9k និង 1.7k forks ។

 

5. Vuesax

 

Vuesax គឺជាក្របខ័ណ្ឌសមាសភាគ UI ថ្មីដែលត្រូវបានបង្កើតឡើងដោយ Vuejs ដើម្បីបង្កើតគម្រោងបានយ៉ាងងាយស្រួល និងជាមួយនឹងរចនាប័ទ្មពិសេស និងរីករាយ vuesax ត្រូវបានបង្កើតឡើងពីដំបូង និងត្រូវបានរចនាឡើងសម្រាប់អ្នកអភិវឌ្ឍន៍គ្រប់ប្រភេទចាប់ពីអ្នកដែលចូលចិត្តផ្នែកខាងមុខរហូតដល់ផ្នែកខាងក្រោយដែលចង់បង្កើតវិធីសាស្រ្តដែលមើលឃើញរបស់ពួកគេយ៉ាងងាយស្រួល។ អ្នកប្រើប្រាស់ចុងក្រោយ។ ការរចនាមានលក្ខណៈប្លែកពីគេសម្រាប់ធាតុផ្សំនីមួយៗ ហើយមិនត្រូវបានបោះយុថ្កាទៅនឹងនិន្នាការដែលមើលឃើញ ឬច្បាប់នៃការរចនានោះទេ ដែលធ្វើឱ្យគម្រោងដែលបានសាងសង់ឡើងជាមួយនឹងវាតែមួយគត់ផងដែរ។

 

វាផ្តល់នូវទំព័រឆ្លើយតប និងសមាសធាតុ UI ដែលអាចប្រើឡើងវិញបាន និងអាចប្ដូរតាមបំណងបាន។ វាក៏ងាយស្រួលក្នុងការចាប់ផ្តើមដោយប្រើ npm ឬ CDN ផងដែរ។ បច្ចុប្បន្ននេះវាមិនគាំទ្រ Vue CLI 3 នៅក្នុងកំណែថ្មីរបស់វាទេ។ វាត្រូវបានប្រភពបើកចំហនៅលើ Github ដែលមានផ្កាយប្រហែល 4.9k និងការទាញយក 6700 NPM ប្រចាំសប្តាហ៍។

 

6. Ant Design Vue

 

Ant Design vue ផ្អែកលើការបញ្ជាក់របស់ Ant Design, Ant design vue គឺជាបណ្ណាល័យ UI vue ដែលមានសំណុំនៃសមាសធាតុដែលមានគុណភាពខ្ពស់ និងការបង្ហាញសម្រាប់ការកសាងចំណុចប្រទាក់អ្នកប្រើអន្តរកម្មសម្បូរបែប។

 

Ant-design-vue ផ្តល់នូវសមាសធាតុ UI ជាច្រើនដើម្បីបង្កើនកម្មវិធីគេហទំព័ររបស់អ្នកដូចជា Skeleton, drawer, ស្ថិតិ និងអ្វីៗជាច្រើនទៀត។

 

ជាមួយនឹងការចេញផ្សាយថ្មីនៃ ant design vue កំណែ 2 វាត្រូវបានអាប់ដេតឱ្យកាន់តែលឿន និងងាយស្រួលក្នុងការរួមបញ្ចូល ទំហំកញ្ចប់តូចជាង ហើយថែមទាំងគាំទ្រ Vue 3 ដែលជាឯកសារ API សមាសភាពថ្មីផងដែរ។ វាក៏គាំទ្រកម្មវិធីរុករកបណ្ដាញទំនើប ការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេ និងអេឡិចត្រុងផងដែរ។ វាមានផ្កាយជាង 13k នៅលើ Github និងនៅលើ 39,693 ការទាញយក NPM ប្រចាំសប្តាហ៍។

 

7. Quasar

 

Quasar គឺជាក្របខ័ណ្ឌ Vue UI ដ៏ល្អបំផុតមួយដែលអនុញ្ញាតឱ្យអ្នកអភិវឌ្ឍន៍ប្រើមូលដ្ឋានកូដប្រភពតែមួយសម្រាប់គ្រប់វេទិការតាមរយៈ Quasar CLI ជាមួយនឹងការអនុវត្តល្អបំផុតចេញពីប្រអប់។ វាអនុញ្ញាតឱ្យអ្នកអភិវឌ្ឍន៍ផ្តោតលើខ្លឹមសារនៃកម្មវិធីរបស់ពួកគេជាជាងរាល់វត្ថុដែលធ្វើពីឡចំហាយផ្សេងទៀត (ប្រព័ន្ធសាងសង់ ប្លង់) នៅជុំវិញវា។ វាត្រូវបានផ្តោតលើការអនុវត្តតាមគោលការណ៍ណែនាំសម្ភារៈ 2.0 ហើយក៏មានសហគមន៍ដែលគាំទ្រផងដែរ។

 

ចំណុចពិសេសមួយអំពី Quasar គឺសមត្ថភាពក្នុងការសរសេរកូដម្តង និងដាក់ឱ្យប្រើប្រាស់ក្នុងពេលដំណាលគ្នាជាគេហទំព័រ ជាកម្មវិធីទូរស័ព្ទ ដោយប្រើមូលដ្ឋានកូដតែមួយ។ វាក៏មានកំណែថ្មីដែលបច្ចុប្បន្ននៅក្នុងបែតាដែលនឹងគាំទ្រមុខងារ vue 3 ។ វាមានផ្កាយប្រហែល 17.8k នៅលើ Github ។

 

8. Buefy

 

Buefy គឺជាបណ្ណាល័យសមាសធាតុ UI ទម្ងន់ស្រាលសម្រាប់ Vue JS ដោយផ្អែកលើ Bulma (ក្របខ័ណ្ឌ CSS) ។ Buefy រួមបញ្ចូលគ្នានូវ Bulma ជាមួយ Vue ដែលជួយអ្នកបង្កើតកម្មវិធីដែលមានរូបរាងល្អដោយប្រើកូដតិចតួចបំផុត។ វាជាស្រទាប់ javascript សម្រាប់ចំណុចប្រទាក់ Bulma របស់អ្នក។

 

វាអាចត្រូវបាននាំចូលទាំងស្រុង ឬសមាសធាតុតែមួយនៅលើគេហទំព័រធម្មតា។ ការបញ្ចូលវាទៅក្នុងគម្រោងរបស់អ្នកគឺងាយស្រួលណាស់ អាចធ្វើបានដោយប្រើ npm ឬ CDN។

 

Buefy ផ្តល់នូវសមាសធាតុ UI ប្លង់ និងរូបតំណាងដែលត្រៀមរួចជាស្រេច។ សមាសធាតុអាចប្រើ SASS ទៅនឹងប្រធានបទរបស់អ្នក។ វាក៏គាំទ្រកម្មវិធីរុករកទំនើបផងដែរ។

 

9. សម្ភារៈ Vue

 

សម្ភារៈ Vue គឺជាក្របខ័ណ្ឌទម្ងន់ស្រាលដែលត្រូវបានប្រើប្រាស់យ៉ាងទូលំទូលាយ ដែលអនុវត្តលក្ខណៈបច្ចេកទេសនៃការរចនាសម្ភារៈ។ វាគឺជាការរួមបញ្ចូលដ៏ល្អបំផុតមួយរវាង Vue.js និង Material Design specs! អ្នកអាចកំណត់រចនាសម្ព័ន្ធវាយ៉ាងងាយស្រួលដើម្បីបំពេញតម្រូវការរបស់អ្នកទាំងអស់តាមរយៈ API ងាយស្រួល។

 

វាឆបគ្នាជាមួយនឹងការរចនាឆ្លើយតប និងការគាំទ្រសម្រាប់កម្មវិធីរុករកបណ្ដាញទំនើបទាំងអស់។ បណ្ណាល័យ​ត្រូវ​បាន​បែង​ចែក​ជា​ស្បែក សមាសភាគ និង​ធាតុ UI ។ ស្បែកផ្តល់ការណែនាំច្បាស់លាស់អំពីរបៀបដាក់ប្រធានបទកម្មវិធីរបស់អ្នក (ឬសរសេរស្បែកផ្ទាល់ខ្លួនរបស់អ្នក) ហើយធាតុផ្សំ និង UI Elements មានប្លង់ ការរុករក ការវាយអក្សរ រូបតំណាង និងធាតុផ្សំ 30 ទៀត។ វាមានផ្កាយប្រហែល 9.2k និង 1.1k forks នៅលើ Github និងការទាញយក 21k + ប្រចាំសប្តាហ៍ NPM ។

 

10. KeenUI

 

KeenUI គឺជាបណ្ណាល័យ vue.js UI ដែលមានទម្ងន់ស្រាលជាមួយនឹង API ដ៏សាមញ្ញមួយដែលត្រូវបានបំផុសគំនិតដោយការរចនាសម្ភារៈរបស់ Google ។ Keen UI មិនមែនជាក្របខ័ណ្ឌ CSS ទេ។ ដូច្នេះហើយ វាមិនរួមបញ្ចូលរចនាប័ទ្មសម្រាប់ប្រព័ន្ធក្រឡាចត្រង្គ ការវាយអក្សរ។

 

វាមានសមាសធាតុដែលអាចប្រើឡើងវិញបានប្រហែល 30 ។ សមាសធាតុអាចប្ដូរតាមបំណងបានដោយការបដិសេធរចនាប័ទ្មដោយប្រើអថេរ SASS ។ អ្នកអាចបញ្ចូលវាទៅក្នុងគម្រោងរបស់អ្នកដោយប្រើ CDN ឬ npm។ វាជាប្រភពបើកចំហ និងមានផ្កាយប្រហែល 4k នៅលើ Github ។

 

សន្និដ្ឋាន

 

បណ្ណាល័យសមាសភាគ UI ពិតជាធ្វើឱ្យការកសាងគម្រោងកាន់តែងាយស្រួល។ ការជ្រើសរើសយកមួយដែលត្រឹមត្រូវអាស្រ័យលើលក្ខណៈនៃគម្រោងដែលអ្នកចង់ធ្វើការ។ មុននឹងចូលទៅក្នុងគម្រោងថ្មី អ្នកគួរតែពិនិត្យមើលបណ្ណាល័យសមាសធាតុ UI ដែលស័ក្តិសមបំផុតសម្រាប់គោលបំណងនេះ។