[Disyorkan] 9 perpustakaan UI Vue paling popular
Vue.js, sebagai rangka kerja JavaScript, ialah pesaing kuat kepada rangka kerja JavaScript moden seperti React.js dan Angular.js kerana kesederhanaan, kemudahan penggunaan dan keluk pembelajarannya.
Pada teras Vue.js, komponen memainkan peranan penting dalam mengabstraksi logik yang kompleks, yang menjadikan projek Vue.js anda boleh diselenggara. Perpustakaan UI, sebaliknya, ialah koleksi komponen UI yang cantik yang dibina oleh pasukan profesional, membolehkan anda membina tapak web anda dengan rupa dan pengoptimuman yang konsisten.
Dalam artikel ini, saya menyenaraikan 9 teratas paling popular (diperingkat dari atas ke bawah berdasarkan muat turun NPM dan bintang Github) pustaka UI untuk anda memulakan projek Vue impian anda.
1. Vuetify (36.2k bintang, 400k muat turun setiap minggu)
![167703411770869[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Vuetify ialah A Pustaka UI berdasarkan UI Bahan membantu membina pengalaman interaktif yang cantik dan berkualiti tinggi untuk tapak web anda. Kekuatan Vuetify termasuk dokumentasi yang jelas, komuniti yang besar dan sokongan untuk Vue 3 dalam versi terbaharunya.
https://github.com/vuetifyjs/vuetify
2. Quasar (22,700 bintang, 112,000 muat turun setiap minggu )
![167703412388158[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Rangka kerja Quasar lebih daripada sekadar perpustakaan UI, ia direka untuk menyediakan penyelesaian UI bersepadu yang konsisten.
https://github.com/quasarframework/quasar
3. Element Plus (18,300 bintang, 115,000 tontonan seminggu Muat Turun)
![167703414052438[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Sebagai perpustakaan UI ketiga paling popular, Element Plus menyediakan pelbagai ciri, seperti sokongan untuk API komposisi Vue 3, integrasi Day.js, i18n menyokong 52 bahasa, dan banyak lagi!
https://github.com/element-plus/element-plus
4. UI Tanpa Kepala (18.5k bintang, 70k mingguan muat turun)
![167703420572890[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Ciri UI tanpa kepala yang tidak digayakan sepenuhnya, komponen UI yang boleh diakses sepenuhnya direka bentuk untuk disepadukan dengan sempurna dengan CSS Tailwind, yang bermaksud Anda bertanggungjawab menyediakan sendiri penanda dan gaya untuk menyesuaikan rupa dan rasa tapak anda.
https://github.com/tailwindlabs/headlessui
5. Ant Design Vue (17.6k bintang, 80k muat turun setiap minggu )
![167703421124663[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Ant Design Vue – Dikuasakan oleh gergasi teknologi China Alibaba Group, ialah satu lagi perpustakaan UI popular khusus untuk e-dagang” Feel".
https://github.com/vueComponent/ant-design-vue
6. Bootstrap Vue (14.2k bintang, mingguan 361k muat turun)
![167703422174298[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Bootstrap ialah perpustakaan UI yang sangat popular, diketahui oleh hampir semua pembangun bahagian hadapan, dan ia telah mengalihkan Edisi Vue - Bootstrap Vue , yang membolehkan anda membina projek responsif, diutamakan mudah alih dan boleh diakses ARIA di web. Walau bagaimanapun, sila ambil perhatian bahawa Vue 3 tidak disokong pada masa ini.
https://github.com/bootstrap-vue/bootstrap-vue
7. UI naif (11.4k bintang, mingguan 20k muat turun)
![167703423012159[Disyorkan] 9 perpustakaan UI Vue paling popular [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Naive UI ialah perpustakaan UI baharu dan menjanjikan yang dikeluarkan di Twitter oleh pencipta Vue, menampilkan set komponen UI yang sangat pantas, direka bentuk unik dan boleh disesuaikan, serta sokongan untuk TypeScript dan sokongan Penuh untuk Vue 3.
https://github.com/tusen-ai/naive-ui
8. Buefy (9.4k bintang, 70k seminggu muat turun)
![1677034238896230.png [Disyorkan] 9 perpustakaan UI Vue paling popular](https://img.php.cn/upload/image/194/456/604/1677034238896230.png)
Buefy ialah perpustakaan UI yang ringan (88kb, minimum + gzip) yang mengikut prinsip reka bentuk Bulma dan beberapa UX Reka Bentuk Bahan . Tidak seperti perpustakaan UI lain, Buefy memfokuskan pada kebolehgunaan dan prestasi tanpa menggunakan animasi secara berlebihan. Tetapi malangnya, pada masa penulisan, Vue 3 tidak disokong lagi.
https://github.com/buefy/buefy
9. Primevue (3200 bintang, 60,000 muat turun setiap minggu)
Primevue menumpukan pada menyediakan anda untuk membangunkan tapak web dalam sebarang kerumitan menggunakan komponennya yang direka dengan baik, canggih dan dinamik. Primevue dibina semula sepenuhnya berdasarkan Vue 3. Jika anda menggunakan Vue3, anda boleh menggunakannya dengan yakin.
https://github.com/primefaces/primevue

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.

Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.

Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.