17 Perkongsian Perpustakaan Komponen UI Praktikal Vue3 (Mudah Alih Web).

Sudah hampir 2 tahun sejak Vue3 dikeluarkan secara rasmi pada Februari tahun ini, ia secara rasmi menjadi versi lalai bagi projek Vue Semua perpustakaan dan rangka kerja komponen utama telah menyokong dan mengoptimumkan Vue 3. Artikel berikut akan mengatur dan. kongsikannya dengan anda. 17 perpustakaan komponen UI praktikal Vue3, termasuk perpustakaan UI Web dan perpustakaan UI mudah alih, saya harap ia akan membantu semua orang!

1 Pustaka UI Web

1. ElementUI Plus

Satu set untuk pembangun , perpustakaan komponen desktop berdasarkan Vue 3.0 yang disediakan oleh pereka bentuk dan pengurus produk. (Belajar perkongsian video: tutorial vuejs)

Alamat rasmi: https://element-plus.org/zh-CN/

2. Ant Design of Vue

Ant Design's Vue mengimplementasikan, membangun dan menyediakan produk bahagian belakang peringkat perusahaan

Alamat rasmi: https : //www.antdv.com/docs/vue/introduce-cn

Ant Design Vue ialah rangka kerja yang sangat matang, dan sangat mudah untuk mencipta antara muka pengguna menggunakan Ant Design Vue , komponen ini boleh menyesuaikan diri dengan pelbagai gaya ikon, fon dan tema hitam. Ant Design Vue terus menambah baik lebih daripada 60 komponennya, pada asasnya meliputi kebanyakan keperluan projek, dan menjadikannya lebih baik dan lebih mudah untuk diakses.

Pakej Ant Design pada Vue3 lebih kecil, terasa lebih ringan dan menyokong SSR (juga termasuk API komposisi Ant Design mempunyai komponen kompleks yang matang seperti jadual data, kotak statistik, pengesahan pop, modal dan pop timbul).

3 BalmUI

Berdasarkan Reka Bentuk Bahan Google, disertakan dengan pemalam dan arahan Vue serta komponen yang sangat boleh disesuaikan daripada mudah kepada kompleks

Alamat rasmi: https://next-material.balmjs.com/

BalmUI ialah perisian yang dibangunkan oleh Balm.js (a alat aliran kerja bahagian hadapan Vue CLI yang serupa) membina perpustakaan komponen UI bahagian hadapan berdasarkan Vue 3 terkini. Ia sedia untuk digunakan di luar kotak, sangat boleh disesuaikan dan gaya reka bentuk mengikut sepenuhnya spesifikasi reka bentuk Reka Bentuk Bahan Google. Ia adalah perpustakaan komponen UI pengalaman interaktif yang sangat baik.

Ciri:

• Dipetik daripada kesan interaktif dan gaya visual produk pertengahan dan belakang peringkat perusahaan, ia cantik dan elegan, dan mempunyai pengalaman perincian yang sangat baik

• Sedia untuk digunakan terus dari kotak. Ia bukan sahaja komponen Vue berkualiti tinggi, tetapi juga mempunyai sejumlah besar pemalam/arahan/perpustakaan alat biasa yang dibungkus untuk memanggil

• perpustakaan ikon terbina dalam. Integrasikan pustaka ikon Ikon Bahan terkini

• Semua komponen dan pemalam sangat boleh disesuaikan dan boleh digunakan secara bebas

4. UI Naif

Pustaka komponen Tucson Vue3, perpustakaan komponen UI bahagian hadapan sumber terbuka percuma berdasarkan Vue 3.0/TypeScript, dokumentasi lengkap, projek KPI bukan pengeluar besar!

Alamat rasmi: https://www.naiveui.com/zh-CN/os-theme

UI Naif ialah versi yang lebih baharu berdasarkan semasa Pustaka komponen UI bahagian hadapan yang dibangunkan oleh timbunan teknologi Vue 3.0/TypeScript Penulis adalah dari TuSimple Ia pada mulanya diselenggara dan digunakan secara dalaman selama dua tahun Kini ia adalah sumber terbuka dalam komuniti Github kawan-kawan yang suka sumber terbuka percuma.

Ciri:

• Komponen yang kaya dan lengkap, lebih daripada 70 komponen perniagaan biasa, pengenalan sokongan atas permintaan

• Disediakan secara rasmi tema Editor tidak menggunakan pembolehubah css yang kurang rumit, sass, atau pemuat webpack Ia menggunakan sistem tema selamat jenis lanjutan yang dibina oleh TypeScript

• Ia berjalan dengan cepat, padat dan ringan. , Dioptimumkan secara khusus untuk gaya, semua komponen boleh digoncangkan [1], dan tidak perlu mengimport sebarang CSS untuk komponen berfungsi dengan betul

5. arco.design

Sistem reka bentuk produk peringkat perusahaan ByteDance, menyokong dua versi React dan Vue

Alamat rasmi: https://arco.design/

ArcoDesign dinaik taraf berdasarkan Reka Bentuk Byte dalam ByteDance Selepas hampir 3 tahun menggilap, dan melalui sejumlah besar pemendakan dan pengesahan perniagaan dalam Byte, ia telah berjaya diadakan di "Rare. Earth Developer Conference" yang dianjurkan oleh Nuggets. Sumber terbuka pada tahun 2021, ini bukan sekadar perpustakaan komponen UI, tetapi sistem reka bentuk produk peringkat perusahaan yang komprehensif.

ArcoDesign terutamanya menyelesaikan masalah menghubungkan reka bentuk dan pembangunan produk dengan lancar untuk meningkatkan kualiti dan kecekapan semasa mencipta aplikasi pertengahan dan belakang. Pada masa ini, ArcoDesign menyediakan terutamanya reka bentuk pengalaman dan pelaksanaan teknikal produk pertengahan dan belakang ByteDance, dan kebanyakannya dibina dan diselenggara oleh pelajar reka bentuk dan pembangunan UED.

Sorotan:

• Menyediakan spesifikasi dan sumber reka bentuk yang sistematik dan komprehensif, meliputi reka bentuk produk, reka bentuk UI dan pasca pembangunan

• Sokongan penyegerakan React dan Vue. Dua set perpustakaan komponen UI, React dan Vue, turut disediakan. Pustaka komponen Vue dibangunkan berdasarkan Vue 3.0

• Menyokong menghidupkan mod gelap dengan satu klik dan penukaran lancar

• Menyediakan amalan terbaik Arco Pro , tersusun Senario halaman biasa disertakan untuk membantu pengguna memulakan projek dengan cepat dan menggunakan templat halaman untuk membina aplikasi pertengahan dan belakang dari 0 hingga 1

6. Quasar

Bina antara muka pengguna Vue.js 3 berprestasi tinggi dan berkualiti tinggi dengan mudah, mudah digunakan tetapi tiada dokumentasi Cina

Alamat rasmi: https:// quasar.dev/

Quasar ialah rangka kerja berfokus prestasi yang lengkap yang membantu membina antara muka pengguna Vue (SPA, PWA, SSR, mudah alih dan desktop Selain Vue). , Node dan Webpack, Quasar Turut disertakan ialah Cordova, Capacitor dan Electron, yang membantu membina pengalaman desktop dan mudah alih tanpa perlu mempelajarinya secara berasingan.

7. iDUX

Pustaka komponen UI Vue3.x, dibangunkan sepenuhnya menggunakan TypeScript

Alamat rasmi: https: / /idux.site/

8 TDesign

Pasukan perniagaan Tencent sedang berkhidmat dengan An. sistem reka bentuk peringkat perusahaan yang dibangunkan semasa proses perniagaan

Alamat rasmi: https://tdesign.tencent.com/

Dokumen pembangunan: https://tdesign.tencent.com/vue - seterusnya/gambaran keseluruhan

9 PrimeVue

Mudah digunakan, pelbagai fungsi, Pustaka komponen UI Vue berprestasi tinggi tinggi

Alamat rasmi: https://www.primefaces.org/primevue/

Pustaka komponen UI bahagian hadapan percuma yang boleh disesuaikan berdasarkan Vue 3, daripada Perpustakaan komponen UI bahagian hadapan yang sangat baik dari luar negara adalah sangat unik dan berbaloi untuk dipelajari dan dimulakan.

PrimeVue ialah satu set perpustakaan komponen UI Vue yang sangat baik yang menyokong perpustakaan komponen UI web Vue 3 Ia mempunyai komponen yang kaya, penyesuaian yang kukuh, dokumentasi tapak web rasmi yang jelas dan contoh kod . Ia adalah mencukupi, dan budaya Cina juga sangat baik. Ia adalah perpustakaan komponen Vue dengan kebolehgunaan yang kuat.

10 DevUI

Komponen UI Huawei direka berdasarkan Vue3 dan DevUI

Alamat rasmi: https://vue -devui.github.io/

11 vuestic-ui

UI sumber Terbuka dan Percuma. perpustakaan, UI sangat cantik, dan terdapat antara muka pengurusan bahagian belakang tersedia.

Alamat rasmi: https://vuestic.dev/

UI Vuestic ialah satu set perpustakaan komponen pembangunan web berdasarkan Vue.js yang dibangunkan oleh pasukan Epicmax telah dikemas kini dan dikeluarkan baru-baru ini versi, dengan harapan dapat menggunakan kepakaran Vue.js untuk membina alat sumber terbuka yang sangat boleh digunakan dan komprehensif. Tidak lama selepas dikeluarkan, Vuestic UI menjadi salah satu perpustakaan komponen paling popular yang dibina dengan Vue.

Pasukan Vuestic UI Epicmax ialah salah satu daripada 15 pasukan pembangunan Vue.js teratas di dunia Reka bentuk responsif membolehkan komponen ini bukan sahaja digunakan dalam projek PC web. tetapi juga Berfungsi pada hampir semua resolusi saiz skrin. Kebolehgunaan Papan Kekunci ialah ciri Vuestic yang menyediakan sokongan papan kekunci yang lancar di seluruh rangka kerja.

Ciri teknikal:

• Serasi dengan Vue3, terbina dalam 52 komponen responsif yang cantik, kaya dengan fungsi

• Menyokong navigasi papan kekunci untuk pengalaman yang lancar, yang jarang ditemui dalam perpustakaan komponen popular

• Menyokong konfigurasi global komponen melalui fail konfigurasi dan pembolehubah CSS

• 2 set skema tema warna terbina dalam

• Sokong pengoptimuman gegaran pokok dan kurangkan saiz pembungkusan

• Sokong pengantarabangsaan i18n

• Serasi dengan penyemak imbas bukan IE

UI Tanpa Kepala

Komponen UI yang tidak bergaya dan boleh diakses sepenuhnya direka bentuk untuk disepadukan dengan sempurna dengan CSS Tailwind.

Alamat rasmi: https://headlessui.com/

13 Lihat UI Plus

Pustaka komponen UI peringkat perusahaan dan penyelesaian bahagian hadapan berdasarkan Vue.js 3

Alamat rasmi: https://www.iviewui.com/

View UI Plus ialah satu set perpustakaan komponen UI berdasarkan Vue.js 3 dalam sistem reka bentuk View Design , digunakan terutamanya dalam sistem pertengahan dan belakang peringkat perusahaan.

2 Pustaka UI Mudah Alih

14 Vant ialah perpustakaan komponen mudah alih yang ringan dan boleh dipercayai yang bersumberkan terbuka pada tahun 2017. Alamat rasmi: https://vant-contrib.gitee.io/vant/#/zh-CN/

Ciri

Prestasi cemerlang, saiz komponen purata kurang daripada 1KB (min gzip)

• 70 komponen berkualiti tinggi, meliputi senario mudah alih arus perdana

• Sifar kebergantungan luaran, tiada pergantungan pada pakej npm pihak ketiga

• Ditulis dalam TypeScript, memberikan definisi jenis lengkap

• Liputan ujian unit melebihi 90%, memberikan jaminan kestabilan

• Menyediakan dokumen dan contoh komponen Cina dan Inggeris yang kaya

• Menyediakan Lakaran dan sumber reka bentuk Axure

• Sokongan applet Vue 2, Vue 3 dan WeChat

• Sokongan penyesuaian tema, 700 pembolehubah tema terbina dalam

• Sokongan pengenalan atas permintaan dan Tree Shaking

• Sokongan kebolehcapaian (dalam penambahbaikan berterusan)

• Sokongan Gelap mod (disokong daripada Vant 4)

• Menyokong pemaparan sebelah pelayan

• Menyokong pengantarabangsaan, terbina dalam 20 pek bahasa

15 NutUI

NutUI ialah perpustakaan komponen mudah alih Vue gaya JD yang membangunkan dan menyediakan antara muka web mudah alih produk gred Perusahaan. Alamat rasmi: https://nutui.jd.com/#/

Ciri versi baharu NutUI 3.0

70 komponen berkualiti tinggi (20 lebih daripada versi lama)

• Berdasarkan spesifikasi visual JD APP 9.0 (versi lama adalah berdasarkan JD APP 7.0)

• Juga menyokong petikan atas permintaan

• Dokumentasi dan contoh yang lebih terperinci

• Sokongan TypeScript

• Menyokong pemaparan sebelah pelayan (mesra untuk keperluan SEO)

• Menyokong tema tersuai

• Liputan ujian unit

16 Varlet

Pustaka komponen mudah alih gaya bahan dengan dokumentasi yang sangat lengkap. Disyorkan oleh You Yuxi dan patut diberi perhatian. Alamat rasmi: https://varlet.gitee.io/varlet-ui/#/zh-CN/home

Teknologi Varlet Ciri-ciri:

Menyediakan 50 komponen biasa yang berkualiti tinggi dan ringan

• Dibangunkan oleh orang Cina, dan menyediakan dokumentasi bahasa Cina/Inggeris yang lengkap

• menyokong pengenalan atas permintaan dan penyesuaian tema, menyokong mod gelap

• menyokong pengantarabangsaan

• Menyokong penonjolan atribut komponen dalam editor webstorm dan vscode

• Sokong pemaparan bahagian pelayan SSR

• Skrip Taip Sokongan

• Pastikan lebih daripada 90% liputan ujian unit

17. perpustakaan berdasarkan NutUI Vue 3 yang dihasilkan oleh pasukan bahagian hadapan JD NutUI, digunakan untuk membangunkan permainan loteri dengan cepat untuk aktiviti pemasaran dan senario permainan mini.

Alamat rasmi: https://nutui.jd.com/bingo/#/

Ciri-ciri teknikal komponen loteri

Mengandungi sejumlah 12 komponen loteri

Reka bentuk UI berdasarkan spesifikasi visual JD APP 10.0

• Tapak web rasmi Dokumentasi terperinci dan contoh kod yang mencukupi

• Berdasarkan Vue 3.0, turut menyokong TypeScript, menyokong pengenalan atas permintaan

• Mudah dan fleksibel tetapan tersuai

• Meliputi 12 komponen loteri biasa
Loteri TurnTable Big Wheel

Cabutan Bertuah Marquee Marquee

• Cabutan Bertuah SquareNine Jiugongge

• Cabutan Bertuah Kad Scratch Card

• Kotak Hadiah Misteri GiftBox

• Mesin Loteri LottoRoll

• Telur Emas Hiteggs

• GiftRain Red Hujan Peket

• LuckShake

• Mesin Cakar Mesin Anak Patung

• ShakeDice

• GuessGift Anda bersembunyi dan saya rasa

(Perkongsian video pembelajaran: web Front -pembangunan akhir, Pengenalan kepada pengaturcaraan)

Atas ialah kandungan terperinci 17 Perkongsian Perpustakaan Komponen UI Praktikal Vue3 (Mudah Alih Web).. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!