Vue JS เป็นเฟรมเวิร์ก JavaScript แบบก้าวหน้าที่ใช้ในการพัฒนาแอปพลิเคชันหน้าเดียว (SPA) และอินเทอร์เฟซผู้ใช้ และเป็นหนึ่งในเฟรมเวิร์กส่วนหน้าที่ใช้กันอย่างแพร่หลายมากที่สุด

 

คุณสมบัติที่น่าสนใจอย่างหนึ่งของ Vue คือความสามารถในการแยกย่อยหน้าเว็บออกเป็นส่วนประกอบต่างๆ และกระบวนการนี้จะง่ายขึ้นด้วยการใช้ไลบรารีส่วนประกอบ UI

 

มีไลบรารีส่วนประกอบ UI มากมายที่สามารถช่วยคุณสร้างส่วนประกอบได้อย่างง่ายดายและรวดเร็ว ดังนั้นในบล็อกนี้ เราจะมารีวิวไลบรารีคอมโพเนนต์ Vue UI 10 อันดับแรกในปี 2021

 

1. PrimeVue

 

PrimeVue เป็น Vue UI Component Library ที่ใช้งานง่าย อเนกประสงค์ และมีประสิทธิภาพ ซึ่งจะช่วยให้คุณสร้างอินเทอร์เฟซผู้ใช้ที่ยอดเยี่ยมได้

 

มีองค์ประกอบ UI มากกว่า 80+ รายการพร้อมการสนับสนุนอย่างเต็มที่สำหรับแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) และการออกแบบที่ตอบสนอง และด้วยการอัปเดตล่าสุด ตอนนี้ไลบรารี่จึงรองรับ Vue 3 อย่างเต็มรูปแบบแล้ว และยังมีส่วนประกอบอีกมากมายอีกด้วย

 

หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับ Primevue คือส่วนประกอบที่หลากหลาย มีตั้งแต่ตารางและตัวแบ่งหน้าไปจนถึงแผนผังองค์กรตามกราฟที่สร้างขึ้นมาอย่างดี ซึ่งคุณสามารถใช้เพื่อสร้างแอป Vue แบบโต้ตอบได้ เป็นโอเพ่นซอร์สและมีดาวมากกว่า 1 ดวงบน Github และมีการดาวน์โหลด 6,983 ครั้งต่อสัปดาห์บน NPM

 

2. วูเอทิฟาย

 

Vuetify เป็นไลบรารี Vue UI ที่มีส่วนประกอบที่ทำด้วยมืออย่างสวยงามซึ่งใช้ข้อกำหนดการออกแบบวัสดุ ซึ่งหมายความว่าได้รับการพัฒนาตามข้อกำหนดของ Material Design ทุกประการโดยทุกส่วนประกอบได้รับการออกแบบอย่างพิถีพิถันให้เป็นโมดูลาร์ ตอบสนองได้ดี และมีประสิทธิภาพ

 

Vuetify ช่วยให้คุณปรับแต่งแอปพลิเคชันของคุณด้วยเลย์เอาต์ที่เป็นเอกลักษณ์และไดนามิก และทำให้สไตล์ของส่วนประกอบของคุณสมบูรณ์แบบโดยใช้ตัวแปร SASS

 

นอกจากนี้ยังรองรับแนวทางการเข้าถึง เบราว์เซอร์สมัยใหม่ทั้งหมด และเข้ากันได้กับ Vue CLI-3 ผสานรวมได้ง่ายและมีส่วนประกอบ UI ที่นำมาใช้ซ้ำได้มากมาย เช่น ภาพหมุน การนำทาง และการ์ด Vuetify เป็นโอเพ่นซอร์สและมีดาวมากกว่า 29 ดาวบน Github และมีการดาวน์โหลด 319,170 ครั้งต่อสัปดาห์บน NPM

 

3. มุมมอง Chakra UI

 

Chakra UI เป็นไลบรารีส่วนประกอบแบบโมดูลาร์ที่เรียบง่ายและเข้าถึงได้ ซึ่งมอบเครื่องมือในการสร้างแอปพลิเคชัน Vue อย่างรวดเร็วและง่ายดาย

 

ส่วนประกอบทั้งหมดสามารถเข้าถึงได้ (เป็นไปตามมาตรฐาน WAI-ARIA อย่างเคร่งครัด) สามารถกำหนดธีมและเขียนได้ รองรับสไตล์ตอบสนองทันทีและรองรับโหมดมืด

 

Chakra UI ยังมีชุดส่วนประกอบเค้าโครงเช่น CBox และ CStack ที่ทำให้ง่ายต่อการจัดสไตล์ส่วนประกอบของคุณโดยการส่งอุปกรณ์ประกอบฉาก นอกจากนี้ยังช่วยให้คุณนำเข้าส่วนประกอบ Chakra UI Vue โดยอัตโนมัติโดยใช้โซลูชันปลั๊กอิน webpack เป็นโอเพ่นซอร์สและมีดาวมากกว่า 900 ดวงบน Github และมีการดาวน์โหลด 331 ครั้งต่อสัปดาห์บน NPM

 

4. บูทสแตรปวิว

 

BootstrapVue ด้วย BootstrapVue คุณสามารถสร้างโปรเจ็กต์ที่ตอบสนอง เน้นมือถือเป็นอันดับแรก และเข้าถึง ARIA บนเว็บได้โดยใช้ Vue.js และไลบรารี CSS ส่วนหน้ายอดนิยม — Bootstrap เอกสารประกอบเข้าใจง่ายและยังตั้งค่าได้ง่ายอีกด้วย ทำให้การใช้งานส่วนหน้าเสร็จสิ้นเร็วขึ้น

 

มีส่วนประกอบมากกว่า 85 รายการ ปลั๊กอินที่มีให้เลือกมากกว่า 45 รายการ คำสั่งหลายรายการ และไอคอนมากกว่า 1000 รายการ นอกจากนี้ยังมีส่วนประกอบที่ใช้งานได้ซึ่งปรับแต่งมาสำหรับเลย์เอาต์และการออกแบบที่ตอบสนอง คุณยังสามารถรวม BootstrapVue เข้ากับโปรเจ็กต์ Nuxt.js ของคุณได้อย่างง่ายดายโดยใช้โมดูล Nuxt.js

 

นอกจากนี้ยังใช้ในลักษณะเดียวกับที่ใช้เฟรมเวิร์ก bootstrap CSS เป็นโอเพ่นซอร์สบน Github โดยมีดาวประมาณ 12.9 ดวงและส้อม 1.7 อัน

 

5. วูแซ็กซ์

 

Vuesax เป็นเฟรมเวิร์กส่วนประกอบ UI ใหม่ที่สร้างขึ้นด้วย Vuejs เพื่อสร้างโครงการได้อย่างง่ายดายและด้วยสไตล์ที่เป็นเอกลักษณ์และน่ารื่นรมย์ vuesax ถูกสร้างขึ้นตั้งแต่เริ่มต้นและออกแบบมาสำหรับนักพัฒนาทุกประเภทตั้งแต่ผู้ชื่นชอบส่วนหน้าไปจนถึงส่วนหลังที่ต้องการสร้างแนวทางการมองเห็นได้อย่างง่ายดาย ผู้ใช้ปลายทาง การออกแบบแต่ละองค์ประกอบมีเอกลักษณ์เฉพาะตัว และไม่ยึดติดกับแนวโน้มด้านภาพหรือกฎการออกแบบใดๆ ทำให้โครงการที่สร้างขึ้นด้วยองค์ประกอบดังกล่าวมีเอกลักษณ์เฉพาะตัวเช่นกัน

 

มันมีหน้าตอบสนองและส่วนประกอบ UI ที่นำมาใช้ซ้ำและปรับแต่งได้ นอกจากนี้ยังง่ายต่อการเริ่มต้นใช้งาน npm หรือ CDN ขณะนี้ยังไม่รองรับ Vue CLI 3 ในเวอร์ชันล่าสุด เป็นโอเพ่นซอร์สบน Github โดยมีดาวประมาณ 4.9 ดาวและมีการดาวน์โหลด NPM รายสัปดาห์ 6700 ครั้ง

 

6. มุมมองการออกแบบมด

 

Ant Design vue ตามข้อกำหนดเฉพาะของ Ant Design Ant design vue เป็นไลบรารี vue UI ที่มีชุดของส่วนประกอบและการสาธิตคุณภาพสูงสำหรับการสร้างส่วนต่อประสานผู้ใช้แบบโต้ตอบที่หลากหลาย

 

Ant-design-vue มีส่วนประกอบ UI มากมายเพื่อเพิ่มประสิทธิภาพเว็บแอปพลิเคชันของคุณ เช่น Skeleton, Drawer, สถิติ และอื่นๆ อีกมากมาย

 

ด้วยรีลีสล่าสุดของ ant design vue เวอร์ชัน 2 ได้รับการอัพเดตเพื่อให้รวมได้เร็วและง่ายขึ้น ขนาดบันเดิลเล็กลง และยังรองรับ Vue 3 ซึ่งเป็นเอกสาร New Composition API นอกจากนี้ยังรองรับเว็บเบราว์เซอร์สมัยใหม่ การเรนเดอร์ฝั่งเซิร์ฟเวอร์ และอิเล็กตรอน มีดาวมากกว่า 13 ดวงบน Github และมีการดาวน์โหลด NPM รายสัปดาห์ 39,693 ครั้ง

 

7. ควาซาร์

 

Quasar เป็นหนึ่งในเฟรมเวิร์ก Vue UI ที่ดีที่สุดที่ช่วยให้นักพัฒนาสามารถใช้ซอร์สโค้ดฐานเดียวสำหรับทุกแพลตฟอร์มผ่าน Quasar CLI พร้อมแนวทางปฏิบัติที่ดีที่สุดทันที ช่วยให้นักพัฒนามุ่งความสนใจไปที่เนื้อหาของแอปมากกว่าการชุบหม้อไอน้ำอื่นๆ ทั้งหมด (ระบบการสร้าง เลย์เอาต์) ที่อยู่รอบๆ มุ่งเน้นไปที่การปฏิบัติตามแนวทาง Material 2.0 และยังมีชุมชนที่ให้การสนับสนุนอย่างมาก

 

สิ่งพิเศษอย่างหนึ่งเกี่ยวกับ Quasar คือความสามารถในการเขียนโค้ดเพียงครั้งเดียวและปรับใช้เป็นเว็บไซต์หรือแอปบนอุปกรณ์เคลื่อนที่ได้พร้อมกันโดยใช้โค้ดเบสเพียงตัวเดียว นอกจากนี้ยังมีเวอร์ชันใหม่ในปัจจุบันซึ่งจะรองรับฟีเจอร์ vue 3 มีดาวประมาณ 17.8k บน Github

 

8. บูฟี่

 

Buefy เป็นไลบรารีส่วนประกอบ UI แบบน้ำหนักเบาสำหรับ Vue JS ที่ใช้ Bulma (เฟรมเวิร์ก CSS) Buefy ผสมผสาน Bulma เข้ากับ Vue ช่วยให้คุณสร้างแอปพลิเคชั่นที่ดูดีโดยใช้โค้ดขั้นต่ำ มันเป็นเลเยอร์จาวาสคริปต์สำหรับอินเทอร์เฟซ Bulma ของคุณ

 

สามารถนำเข้าทั้งหมดหรือส่วนประกอบเดียวบนเว็บเพจธรรมดาก็ได้ การรวมเข้ากับโปรเจ็กต์ของคุณนั้นค่อนข้างง่าย สามารถทำได้โดยใช้ npm หรือ CDN

 

Buefy จัดเตรียมส่วนประกอบ UI เค้าโครงและไอคอนสำเร็จรูป ส่วนประกอบสามารถใช้ SASS กับธีมของคุณได้ นอกจากนี้ยังรองรับเบราว์เซอร์สมัยใหม่อีกด้วย

 

9. วิววัสดุ

 

Vue Material เป็นเฟรมเวิร์กน้ำหนักเบาที่ใช้กันอย่างแพร่หลาย ซึ่งนำข้อกำหนดของ Material Design ไปใช้ มันเป็นหนึ่งในการบูรณาการที่ดีที่สุดระหว่าง Vue.js และข้อกำหนดการออกแบบวัสดุ! คุณสามารถกำหนดค่าให้เหมาะกับทุกความต้องการของคุณได้อย่างง่ายดายผ่าน API ที่ใช้งานง่าย

 

มันเข้ากันได้กับการออกแบบที่ตอบสนองและรองรับเว็บเบราว์เซอร์สมัยใหม่ทั้งหมด ไลบรารีแบ่งออกเป็นธีม ส่วนประกอบ และองค์ประกอบ UI ธีมจะให้คำแนะนำที่ชัดเจนเกี่ยวกับวิธีการจัดธีมให้กับแอปพลิเคชันของคุณ (หรือเขียนธีมของคุณเอง) และส่วนประกอบและองค์ประกอบ UI ประกอบด้วยเค้าโครง การนำทาง การพิมพ์ ไอคอน และส่วนประกอบอีก 30 รายการ มีดาวประมาณ 9.2 ดวงและส้อม 1.1 บน Github และ NPM ดาวน์โหลด 21 + รายสัปดาห์

 

10. คีนยูไอ

 

KeenUI เป็นไลบรารี่ UI ของ vue.js น้ำหนักเบา พร้อมด้วย API แบบง่าย ซึ่งได้รับแรงบันดาลใจจากดีไซน์ Material ของ Google Keen UI ไม่ใช่เฟรมเวิร์ก CSS ดังนั้นจึงไม่รวมสไตล์สำหรับระบบกริด การพิมพ์ ฯลฯ แต่จะเน้นไปที่ส่วนประกอบแบบโต้ตอบที่ต้องใช้ Javascript แทน

 

มีส่วนประกอบที่ใช้ซ้ำได้ประมาณ 30 ชิ้น ส่วนประกอบต่างๆ สามารถปรับแต่งได้โดยการแทนที่สไตล์โดยใช้ตัวแปร SASS คุณสามารถรวมเข้ากับโปรเจ็กต์ของคุณโดยใช้ CDN หรือ npm เป็นโอเพ่นซอร์สและมีดาวประมาณ 4 ดวงบน Github

 

สรุป

 

ไลบรารีส่วนประกอบ UI ทำให้การสร้างโครงการง่ายขึ้นมากอย่างแน่นอน การเลือกสิ่งที่ถูกต้องขึ้นอยู่กับคุณสมบัติของโครงการที่คุณต้องการทำงาน ก่อนที่จะเริ่มโปรเจ็กต์ใหม่ ขอแนะนำให้ตรวจสอบไลบรารีคอมโพเนนต์ UI ที่เหมาะสมที่สุดสำหรับวัตถุประสงค์ดังกล่าว