Vue JS ialah rangka kerja JavaScript progresif yang digunakan untuk membangunkan aplikasi satu halaman (SPA) dan Antara Muka Pengguna. Dan ia adalah salah satu rangka kerja bahagian hadapan yang paling banyak digunakan di luar sana.
Satu ciri menarik Vue ialah keupayaannya untuk memecahkan halaman web kepada komponen yang berbeza. Dan proses ini menjadi lebih mudah dengan penggunaan perpustakaan komponen UI.
Terdapat pelbagai perpustakaan komponen UI yang boleh membantu anda membuat komponen dengan mudah dan cepat. Jadi dalam blog ini, kami akan menyemak 10 Perpustakaan Komponen UI Vue teratas untuk 2021.
1. PrimeVue
PrimeVue ialah Pustaka Komponen UI Vue yang mudah digunakan, serba boleh dan berprestasi yang membantu anda membina antara muka pengguna yang hebat.
Ia mempunyai lebih 80+ komponen UI dengan sokongan penuh untuk Garis Panduan Kebolehcapaian Kandungan Web (WCAG) dan reka bentuk responsif. Dan terima kasih kepada kemas kini baru-baru ini, perpustakaan kini mempunyai sokongan penuh untuk Vue 3. Ia juga mendapat lebih banyak komponen.
Salah satu perkara terbaik tentang Primevue ialah rangkaian komponennya yang luas. Ia terdiri daripada jadual dan penomboran kepada carta organisasi berasaskan graf yang direka dengan baik yang boleh anda gunakan untuk membuat apl Vue interaktif. Ia adalah sumber terbuka dan mempunyai 1k+ bintang di Github dan 6,983 muat turun mingguan di NPM.
2. Vuetify
Vuetify ialah Perpustakaan UI Vue dengan Komponen buatan tangan yang cantik yang menggunakan spesifikasi Reka Bentuk Bahan. Ini bermakna ia telah dibangunkan dengan tepat mengikut spesifikasi Reka Bentuk Bahan dengan setiap komponen direka dengan teliti untuk menjadi modular, responsif dan berprestasi.
Vuetify membolehkan anda menyesuaikan aplikasi anda dengan reka letak yang unik dan dinamik serta menyempurnakan gaya komponen anda menggunakan pembolehubah SASS.
Ia juga menyokong garis panduan kebolehaksesan, semua penyemak imbas moden dan serasi dengan Vue CLI-3. Ia mudah untuk disepadukan dan mempunyai banyak komponen UI yang boleh diguna semula seperti karusel, navigasi dan kad. Vuetify ialah sumber terbuka dan dengan lebih 29k bintang di Github dan 319,170 muat turun mingguan di NPM.
3. Cakra UI Vue
UI Chakra ialah perpustakaan komponen modular dan mudah diakses yang memberikan anda alatan untuk membina aplikasi Vue dengan cepat dan mudah.
Semua komponen boleh diakses (ia mengikut piawaian WAI-ARIA dengan ketat), boleh bertema dan boleh digubah. Ia menyokong gaya responsif di luar kotak dan serasi mod gelap.
UI Chakra juga mengandungi satu set komponen susun atur seperti CBox dan CStack yang memudahkan untuk menggayakan komponen anda dengan menghantar prop. Ia juga membolehkan anda mengimport komponen Chakra UI Vue secara automatik menggunakan penyelesaian pemalam webpack. Ia adalah sumber terbuka dan mempunyai 900+ bintang di Github dan muat turun 331 mingguan di NPM.
4. Bootstrap Vue
BootstrapVue, Dengan BootstrapVue anda boleh membina projek responsif, diutamakan mudah alih dan ARIA di web menggunakan Vue.js dan perpustakaan CSS bahagian hadapan yang popular — Bootstrap. Dokumentasi mudah difahami dan ia juga mudah disediakan. Ia menjadikan pelaksanaan bahagian hadapan dilakukan dengan lebih pantas.
Ia menawarkan 85+ komponen, lebih 45 pemalam yang tersedia, beberapa arahan dan 1000+ ikon. Ia juga menyediakan komponen berfungsi yang disesuaikan untuk susun atur dan reka bentuk responsif. anda juga boleh menyepadukan BootstrapVue dengan mudah ke dalam projek Nuxt.js anda menggunakan modul Nuxt.js.
Ia juga digunakan dengan cara yang sama seperti rangka kerja CSS bootstrap sedang digunakan. Ia adalah sumber terbuka di Github dengan kira-kira 12.9k bintang dan 1.7k garpu.
5. Vuesax
Vuesax ialah rangka kerja komponen UI baharu yang dicipta dengan Vuejs untuk membuat projek dengan mudah dan dengan gaya yang unik dan menyenangkan, vuesax dicipta dari awal dan direka untuk semua jenis pembangun daripada pencinta bahagian hadapan hingga bahagian belakang yang ingin mencipta pendekatan visual mereka dengan mudah untuk pengguna akhir. Reka bentuk adalah unik untuk setiap komponen dan tidak berlabuh pada mana-mana arah aliran visual atau peraturan reka bentuk, menjadikan projek yang dibina dengannya juga unik.
ia menawarkan halaman responsif dan komponen UI yang boleh digunakan semula dan disesuaikan. Ia juga mudah untuk bermula sama ada menggunakan npm atau CDN. Pada masa ini ia tidak menyokong Vue CLI 3 dalam versi terbarunya. Ia adalah sumber terbuka di Github dengan kira-kira 4.9k bintang dan 6700 muat turun mingguan NPM.
6. Ant Design Vue
Ant Design vue berdasarkan spesifikasi Ant Design, Ant design vue ialah perpustakaan UI vue yang mengandungi set komponen berkualiti tinggi dan demo untuk membina antara muka pengguna yang kaya dan interaktif.
Ant-design-vue menyediakan banyak komponen UI untuk memperkayakan aplikasi web anda seperti Skeleton, laci, statistik dan banyak lagi.
Dengan keluaran baru-baru ini ant design vue versi 2, ia telah dikemas kini untuk menjadi lebih pantas dan lebih mudah untuk disepadukan, saiz berkas yang lebih kecil, dan juga menyokong Vue 3, dokumen API Komposisi Baharu. Ia juga menyokong penyemak imbas web moden, Rendering sebelah pelayan dan elektron. Ia mempunyai lebih 13k bintang di Github dan pada 39,693 muat turun mingguan NPM.
7. Quasar
Quasar ialah salah satu rangka kerja UI Vue terbaik yang membolehkan pembangun menggunakan satu pangkalan kod sumber untuk semua platform melalui Quasar CLI dengan amalan terbaik di luar kotak. Ia membolehkan pembangun menumpukan pada kandungan Apl mereka dan bukannya semua bahan penyaduran dandang lain (sistem binaan, susun atur) di sekelilingnya. ia memberi tumpuan kepada mengikuti garis panduan Bahan 2.0 dan juga mempunyai komuniti yang sangat menyokong.
Salah satu perkara istimewa tentang Quasar ialah keupayaan untuk menulis kod sekali dan pada masa yang sama menggunakan ia sebagai tapak web, Apl Mudah Alih menggunakan hanya satu pangkalan kod. Terdapat juga versi baharu pada masa ini dalam beta yang akan menyokong ciri vue 3. Ia mempunyai kira-kira 17.8k bintang di Github.
8. Buefy
Buefy ialah perpustakaan komponen UI yang ringan untuk Vue JS berdasarkan Bulma (rangka kerja CSS). Buefy menggabungkan Bulma dengan Vue, membantu anda membina aplikasi yang kelihatan baik menggunakan kod minimum. ia ialah lapisan javascript untuk antara muka Bulma anda.
Ia boleh sama ada diimport sepenuhnya atau komponen tunggal pada halaman web biasa. Mengintegrasikannya ke dalam projek anda agak mudah, sama ada boleh dilakukan menggunakan npm atau CDN.
Buefy menyediakan komponen UI siap sedia, reka letak dan ikon. Komponen boleh menggunakan SASS untuk tema anda. Ia juga menyokong pelayar moden.
9. Bahan Vue
Bahan Vue ialah rangka kerja ringan yang digunakan secara meluas yang melaksanakan spesifikasi Reka Bentuk Bahan. Ia adalah salah satu penyepaduan terbaik antara spesifikasi Vue.js dan Reka Bentuk Bahan! Anda boleh mengkonfigurasinya dengan mudah untuk memenuhi semua keperluan anda melalui API yang mudah.
Ia serasi dengan reka bentuk responsif dan sokongan untuk semua Pelayar Web moden. Pustaka dibahagikan kepada Tema, Komponen dan Elemen UI. Tema memberikan panduan muktamad tentang cara untuk tema aplikasi anda (atau menulis tema anda sendiri) dan Komponen dan Elemen UI terdiri daripada reka letak, navigasi, tipografi, ikon dan 30 lagi komponen. Ia mempunyai kira-kira 9.2k bintang dan 1.1k garpu pada Github dan 21k + muat turun mingguan NPM.
10. KeenUI
KeenUI ialah perpustakaan UI vue.js yang ringan dengan API ringkas, diilhamkan oleh Reka Bentuk Bahan Google. Keen UI bukan rangka kerja CSS. Oleh itu, ia tidak termasuk gaya untuk sistem grid, tipografi, dsb. Sebaliknya, tumpuan adalah pada komponen interaktif yang memerlukan Javascript.
Ia mempunyai kira-kira 30 komponen boleh guna semula. Komponen boleh disesuaikan dengan mengatasi gaya menggunakan pembolehubah SASS. anda boleh mengintegrasikannya ke dalam projek anda sama ada menggunakan CDN atau npm. Ia adalah sumber terbuka dan mempunyai kira-kira 4k bintang di Github.
Kesimpulan
Perpustakaan komponen UI pasti menjadikan pembinaan projek lebih mudah. Memilih yang betul bergantung pada ciri projek yang ingin anda usahakan. Sebelum menyelami projek baharu, anda dinasihatkan untuk menyemak pustaka komponen UI yang paling sesuai untuk tujuan tersebut.