Vue JS ເປັນກອບ JavaScript ທີ່ກ້າວໜ້າທີ່ໃຊ້ເພື່ອພັດທະນາແອັບພລິເຄຊັນໜ້າດຽວ (SPAs) ແລະສ່ວນຕິດຕໍ່ຜູ້ໃຊ້. ແລະມັນເປັນຫນຶ່ງໃນກອບດ້ານຫນ້າທີ່ໃຊ້ກັນຢ່າງກວ້າງຂວາງທີ່ສຸດຢູ່ທີ່ນັ້ນ.

 

ລັກສະນະທີ່ຫນ້າສົນໃຈອັນຫນຶ່ງຂອງ Vue ແມ່ນຄວາມສາມາດຂອງມັນທີ່ຈະທໍາລາຍຫນ້າເວັບເປັນອົງປະກອບທີ່ແຕກຕ່າງກັນ. ແລະຂະບວນການນີ້ຈະກາຍເປັນທີ່ງ່າຍດາຍກັບການນໍາໃຊ້ຫ້ອງສະຫມຸດອົງປະກອບ UI.

 

ມີຫ້ອງສະຫມຸດອົງປະກອບ UI ຕ່າງໆທີ່ສາມາດຊ່ວຍໃຫ້ທ່ານສ້າງອົງປະກອບໄດ້ງ່າຍແລະໄວ. ດັ່ງນັ້ນໃນ blog ນີ້, ພວກເຮົາຈະທົບທວນຄືນ 10 Vue UI Component Libraries ສໍາລັບປີ 2021.

 

1. PrimeVue

 

PrimeVue ເປັນຫ້ອງສະໝຸດອົງປະກອບ Vue UI ທີ່ໃຊ້ງ່າຍ, ຫຼາກຫຼາຍ ແລະປະສິດທິພາບທີ່ຊ່ວຍໃຫ້ທ່ານສ້າງສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ທີ່ງົດງາມ.

 

ມັນ​ມີ​ຫຼາຍ​ກວ່າ 80+ ອົງ​ປະ​ກອບ UI ທີ່​ມີ​ສະ​ຫນັບ​ສະ​ຫນູນ​ຢ່າງ​ເຕັມ​ທີ່​ສໍາ​ລັບ​ຂໍ້​ແນະ​ນໍາ​ການ​ເຂົ້າ​ເຖິງ​ເນື້ອ​ໃນ​ເວັບ (WCAG​) ແລະ​ການ​ອອກ​ແບບ​ທີ່​ຕອບ​ສະ​ຫນອງ​. ແລະຂໍຂອບໃຈກັບການປັບປຸງທີ່ຜ່ານມາ, ຫ້ອງສະຫມຸດໃນປັດຈຸບັນໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມທີ່ສໍາລັບ Vue 3. ມັນຍັງໄດ້ຮັບຊໍ່ອົງປະກອບເພີ່ມເຕີມ.

 

ຫນຶ່ງໃນສິ່ງທີ່ດີທີ່ສຸດກ່ຽວກັບ Primevue ແມ່ນລະດັບຄວາມກ້ວາງຂອງອົງປະກອບຂອງມັນ. ພວກມັນມີຕັ້ງແຕ່ຕາຕະລາງ ແລະຕົວພິມໜ້າໄປຫາແຜນຜັງອົງກອນທີ່ອີງໃສ່ກາຟທີ່ສ້າງມາໄດ້ດີ ເຊິ່ງທ່ານສາມາດໃຊ້ເພື່ອສ້າງແອັບ Vue ແບບໂຕ້ຕອບໄດ້. ມັນເປັນ open-source ແລະມີ 1k+ ດາວໃນ Github ແລະ 6,983 ດາວໂຫຼດປະຈໍາອາທິດໃນ NPM.

 

2. ຢັ້ງຢືນ

 

Vuetify ເປັນຫ້ອງສະໝຸດ Vue UI ທີ່ມີອົງປະກອບທີ່ເຮັດດ້ວຍມືທີ່ສວຍງາມເຊິ່ງໃຊ້ສະເພາະການອອກແບບວັດສະດຸ. ນີ້ ໝາຍ ຄວາມວ່າມັນໄດ້ຖືກພັດທະນາຢ່າງແນ່ນອນຕາມຄຸນລັກສະນະຂອງການອອກແບບວັດສະດຸໂດຍທຸກໆອົງປະກອບທີ່ຖືກສ້າງຂື້ນຢ່າງລະມັດລະວັງເພື່ອໃຫ້ເປັນໂມດູນ, ຕອບສະຫນອງແລະການປະຕິບັດ.

 

Vuetify ໃຫ້ທ່ານປັບແຕ່ງແອັບພລິເຄຊັນຂອງທ່ານດ້ວຍຮູບແບບທີ່ເປັນເອກະລັກ ແລະແບບເຄື່ອນໄຫວ ແລະໃຫ້ຮູບແບບຂອງອົງປະກອບຂອງທ່ານສົມບູນແບບໂດຍໃຊ້ຕົວແປ SASS.

 

ມັນຍັງສະຫນັບສະຫນູນຄໍາແນະນໍາການເຂົ້າເຖິງ, ທຸກຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ແລະເຂົ້າກັນໄດ້ກັບ Vue CLI-3. ມັນງ່າຍທີ່ຈະປະສົມປະສານແລະມີອົງປະກອບ UI ທີ່ໃຊ້ຄືນໄດ້ຫຼາຍຢ່າງເຊັ່ນ: carousels, ການນໍາທາງ, ແລະບັດ. Vuetify ເປັນແຫຼ່ງເປີດແລະມີຫຼາຍກວ່າ 29k ດາວໃນ Github ແລະ 319,170 ດາວໂຫຼດປະຈໍາອາທິດໃນ NPM.

 

3. Chakra UI Vue

 

Chakra UI ແມ່ນຫ້ອງສະຫມຸດອົງປະກອບແບບໂມດູລາທີ່ງ່າຍດາຍແລະສາມາດເຂົ້າເຖິງໄດ້ເຊິ່ງໃຫ້ທ່ານມີເຄື່ອງມືໃນການສ້າງຄໍາຮ້ອງສະຫມັກ Vue ໄດ້ໄວແລະງ່າຍດາຍ.

 

ອົງປະກອບທັງໝົດແມ່ນສາມາດເຂົ້າເຖິງໄດ້ (ມັນປະຕິບັດຕາມມາດຕະຖານ WAI-ARIA ຢ່າງເຂັ້ມງວດ), ຮູບແບບສີສັນ ແລະສາມາດປະກອບໄດ້. ມັນຮອງຮັບຮູບແບບການຕອບສະໜອງອອກຈາກກ່ອງ ແລະເຂົ້າກັນໄດ້ໃນໂໝດມືດ.

 

Chakra UI ຍັງມີຊຸດຂອງອົງປະກອບການຈັດວາງເຊັ່ນ CBox ແລະ CStack ທີ່ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການຈັດຮູບແບບອົງປະກອບຂອງເຈົ້າໂດຍການຖ່າຍທອດອຸປະກອນເສີມ. ມັນຍັງອະນຸຍາດໃຫ້ທ່ານນໍາເຂົ້າອົງປະກອບ Chakra UI Vue ໂດຍອັດຕະໂນມັດໂດຍໃຊ້ວິທີແກ້ໄຂ plugin webpack. ມັນເປັນ open-source ແລະມີ 900+ ດາວໃນ Github ແລະການດາວໂຫຼດ 331 ອາທິດໃນ NPM.

 

4. Bootstrap Vue

 

BootstrapVue, ດ້ວຍ BootstrapVue ທ່ານສາມາດສ້າງໂຄງການທີ່ຕອບສະຫນອງ, ມືຖືທໍາອິດ, ແລະ ARIA ເຂົ້າເຖິງໄດ້ໃນເວັບໂດຍໃຊ້ Vue.js ແລະຫ້ອງສະຫມຸດ CSS ທີ່ນິຍົມ - Bootstrap. ເອກະສານແມ່ນງ່າຍທີ່ຈະເຂົ້າໃຈແລະມັນຍັງງ່າຍທີ່ຈະຕັ້ງຄ່າ. ມັນເຮັດໃຫ້ການປະຕິບັດດ້ານຫນ້າເຮັດໄດ້ໄວຂຶ້ນ.

 

ມັນ​ສະ​ຫນອງ 85+ ອົງ​ປະ​ກອບ​, ຫຼາຍ​ກວ່າ 45 plugins ທີ່​ມີ​ຢູ່​, ຄໍາ​ແນະ​ນໍາ​ຈໍາ​ນວນ​ຫນຶ່ງ​, ແລະ 1000+ icons​. ມັນຍັງສະຫນອງອົງປະກອບທີ່ເປັນປະໂຫຍດທີ່ເຫມາະສົມກັບການຈັດວາງແລະການອອກແບບທີ່ຕອບສະຫນອງ. ທ່ານຍັງສາມາດປະສົມປະສານ BootstrapVue ເຂົ້າໄປໃນໂຄງການ Nuxt.js ຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍໂດຍໃຊ້ໂມດູນ Nuxt.js.

 

ມັນຍັງຖືກນໍາໃຊ້ແບບດຽວກັນກັບກອບ CSS bootstrap ຖືກນໍາໃຊ້. ມັນເປັນແຫຼ່ງເປີດໃນ Github ທີ່ມີປະມານ 12.9k ດາວແລະ 1.7k fork.

 

5. ວັອດສ໌

 

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, New Composition API document. ມັນ​ຍັງ​ສະ​ຫນັບ​ສະ​ຫນູນ​ຕົວ​ທ່ອງ​ເວັບ​ທີ່​ທັນ​ສະ​ໄຫມ​, Rendering ຂ້າງ​ເຊີ​ເວີ​, ແລະ​ເອ​ເລັກ​ໂຕຣ​ນິກ​. ມັນມີຫຼາຍກວ່າ 13k ດາວໃນ Github ແລະ 39,693 ດາວໂຫຼດ NPM ຕໍ່ອາທິດ.

 

7. ຄວາຊາ

 

Quasar ແມ່ນຫນຶ່ງໃນກອບ Vue UI ທີ່ດີທີ່ສຸດທີ່ອະນຸຍາດໃຫ້ນັກພັດທະນາໃຊ້ລະຫັດແຫຼ່ງຫນຶ່ງສໍາລັບທຸກແພລະຕະຟອມຜ່ານ Quasar CLI ດ້ວຍການປະຕິບັດທີ່ດີທີ່ສຸດອອກຈາກກ່ອງ. ມັນເຮັດໃຫ້ຜູ້ພັດທະນາສຸມໃສ່ເນື້ອໃນຂອງ App ຂອງເຂົາເຈົ້າແທນທີ່ຈະກ່ວາສິ່ງອື່ນໆທັງຫມົດ boiler plating (ລະບົບການກໍ່ສ້າງ, ຮູບແບບ) ປະມານມັນ. ມັນສຸມໃສ່ການປະຕິບັດຕາມຄໍາແນະນໍາຂອງວັດສະດຸ 2.0 ແລະຍັງມີຊຸມຊົນທີ່ສະຫນັບສະຫນູນຫຼາຍ.

 

ຫນຶ່ງໃນສິ່ງທີ່ພິເສດກ່ຽວກັບ Quasar ແມ່ນຄວາມສາມາດໃນການຂຽນລະຫັດຫນຶ່ງຄັ້ງແລະພ້ອມໆກັນນໍາໃຊ້ມັນເປັນເວັບໄຊທ໌, App ມືຖືໂດຍໃຊ້ພຽງແຕ່ຫນຶ່ງ codebase. ນອກນັ້ນຍັງມີເວີຊັນໃໝ່ຢູ່ໃນເບຕ້າທີ່ຮອງຮັບຄຸນສົມບັດ 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! ທ່ານສາມາດ configure ມັນໃຫ້ເຫມາະສົມກັບທຸກຄວາມຕ້ອງການຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍໂດຍຜ່ານ API ງ່າຍ.

 

ມັນເຂົ້າກັນໄດ້ກັບການອອກແບບທີ່ຕອບສະຫນອງ ແລະສະຫນັບສະຫນູນສໍາລັບຕົວທ່ອງເວັບເວັບທີ່ທັນສະໄຫມທັງຫມົດ. ຫ້ອງສະໝຸດໄດ້ຖືກແບ່ງອອກເປັນຫົວຂໍ້, ອົງປະກອບ ແລະອົງປະກອບ UI. ຫົວຂໍ້ດັ່ງກ່າວໃຫ້ຄໍາແນະນໍາທີ່ແນ່ນອນກ່ຽວກັບວິທີການຈັດຮູບແບບຄໍາຮ້ອງສະຫມັກຂອງທ່ານ (ຫຼືຂຽນຫົວຂໍ້ຂອງທ່ານເອງ) ແລະອົງປະກອບແລະອົງປະກອບ UI ປະກອບດ້ວຍການຈັດວາງ, ການນໍາທາງ, typography, ໄອຄອນ, ແລະ 30 ອົງປະກອບເພີ່ມເຕີມ. ມັນມີປະມານ 9.2k ດາວແລະ 1.1k fork ໃນ Github ແລະ 21k + ອາທິດດາວໂຫຼດ NPM.

 

10. KeenUI

 

KeenUI ເປັນຫ້ອງສະໝຸດ UI vue.js ທີ່ມີນ້ຳໜັກເບົາທີ່ມີ API ງ່າຍໆ, ໄດ້ຮັບແຮງບັນດານໃຈຈາກການອອກແບບວັດສະດຸຂອງ Google. Keen UI ບໍ່ແມ່ນກອບ CSS. ດັ່ງນັ້ນ, ມັນບໍ່ໄດ້ລວມເອົາຮູບແບບສໍາລັບລະບົບຕາຂ່າຍໄຟຟ້າ, typography, ແລະອື່ນໆ. ແທນທີ່ຈະ, ຈຸດສຸມແມ່ນກ່ຽວກັບອົງປະກອບການໂຕ້ຕອບທີ່ຕ້ອງການ Javascript.

 

ມັນມີປະມານ 30 ອົງປະກອບທີ່ໃຊ້ຄືນໄດ້. ອົງປະກອບສາມາດປັບແຕ່ງໄດ້ໂດຍການ overriding ຮູບແບບໂດຍໃຊ້ຕົວແປ SASS. ທ່ານສາມາດປະສົມປະສານມັນເຂົ້າໄປໃນໂຄງການຂອງທ່ານໂດຍໃຊ້ CDN ຫຼື npm. ມັນເປັນແຫຼ່ງເປີດແລະມີປະມານ 4k ດາວໃນ Github.

 

ສະຫຼຸບ

 

ຫ້ອງສະຫມຸດອົງປະກອບ UI ແນ່ນອນເຮັດໃຫ້ການສ້າງໂຄງການງ່າຍຂຶ້ນຫຼາຍ. ການເລືອກທີ່ຖືກຕ້ອງແມ່ນຂຶ້ນກັບລັກສະນະຂອງໂຄງການທີ່ທ່ານຕ້ອງການເຮັດວຽກ. ກ່ອນທີ່ຈະເຂົ້າໄປໃນໂຄງການໃຫມ່, ແນະນໍາໃຫ້ຜູ້ຫນຶ່ງທົບທວນຄືນຫ້ອງສະຫມຸດອົງປະກອບ UI ທີ່ເຫມາະສົມທີ່ສຸດສໍາລັບຈຸດປະສົງ.