Giới thiệu

Vue JS gần đây đã trở nên phổ biến, chủ yếu là do sự dễ dàng mà nó cung cấp cả về học tập và phát triển ứng dụng. Cho dù bạn là một nhà phát triển có kinh nghiệm đang tìm cách chuyển sang Vue, hoặc chỉ mới bắt đầu, điều cần thiết là bạn phải làm việc với các công cụ phù hợp. Điều này sẽ giúp bạn nhanh chóng xây dựng các ứng dụng tuyệt vời mà không phải phát minh lại công cụ.

Chúng tôi đã xem xét toàn bộ chu trình phát triển Vue JS khi chọn các công cụ cho danh sách này. Bắt đầu thiết lập một bản tóm tắt cho ứng dụng mới của bạn với tất cả các yếu tố cần thiết, chúng tôi đã đề cập đến nhiều khái niệm ứng dụng quan trọng, gỡ lỗi và thậm chí là kiểm thử.

1. Vue CLI

Giống như trong bất kỳ framework JavaScript nào khác, bạn không thể làm gì nhiều với Vue nếu không có công cụ CLI. CLI cho phép bạn nhanh chóng tạo các cấu trúc dự án và triển khai các bản mẫu. Nó cũng cho phép bạn tạo các nguyên mẫu ngay lập tức để thể hiện các tính năng mới.

Ngoài các tiếng chuông và còi thông thường, Vue CLI cung cấp nhiều hỗ trợ hơn cho các công cụ phát triển web như TypeScript, Babel, PostCSS, ESLint, Unit Testing, PWA và End-to-end Testing. Nó cũng tương thích với các plugin của bên thứ ba có thể mở rộng được tạo bởi cộng đồng.

Một lợi ích khác của Vue CLI là nó không yêu cầu đẩy ra. Nói cách khác, có thể làm nhiều hơn về mặt tùy chỉnh với Vue CLI, khi so sánh với các framework khác. Graphical UI của Vue CLI là một trong những tính năng quan trọng nhất của nó và cho phép bạn tạo các dự án mới và quản lý chúng một cách thuận tiện.

2. Nuxt JS

Khi bạn đã thiết lập VueJS, bước đầu tiên trong việc tạo các ứng dụng của bạn là thiết lập một bản tóm tắt tốt. Điều này sẽ giúp bạn tránh phải viết code từ đầu. Có nhiều tùy chọn để tạo bản mẫu, nhưng chúng tôi đã chọn Next JS cho danh sách của mình vì nó cho phép bạn tạo nhiều loại ứng dụng như Trình diễn phía máy chủ (SSR), Ứng dụng web lũy tiến (PWA), Ứng dụng trang đơn (SPA), và các trang web tĩnh.

Nuxt có kiến trúc mô-đun và có hơn 50 mô-đun có thể làm cho quá trình phát triển của bạn nhanh hơn. Các mô-đun này hỗ trợ các tác vụ như nhận lợi ích PWA, thêm Google Analytics hoặc tạo sơ đồ trang web. Nó cũng cung cấp khả năng điều chỉnh hiệu năng vượt trội bằng cách triển khai các thực tiễn tốt nhất của Vue JS và Node.JS thông qua bộ phân tích gói của nó.

3. Bit for Vue

Bit là một cách tuyệt vời để xây dựng thư viện thành phần Vue thế hệ tiếp theo của bạn. Nó giải quyết vấn đề chia sẻ và cộng tác trên các thành phần UI trên các kho lưu trữ. Đây cũng là một cách mạnh mẽ để soạn UI với các thành phần được chia sẻ, được phát triển độc lập, được phiên bản và cập nhật.

Trong nền tảng bit.dev, bạn có thể lưu trữ và sắp xếp các thành phần của mình. Nếu một thư viện thành phần giống như một album nhạc CD, thì Bit.dev giống như iTunes. Bit.dev tận dụng công cụ CLI của Bit để cho phép bạn phiên bản và đẩy các thành phần độc lập từ bất kỳ dự án địa phương nào sang bộ sưu tập trên Bit.dev - nơi chúng được tổ chức, ghi lại, hiển thị và có thể được cài đặt / nhập.

Trong Bit.dev, nhóm của bạn có thể tìm kiếm, kết xuất, cài đặt và thậm chí cập nhật bất kỳ thành phần nào từ bất kỳ dự án mới nào. Trên nền tảng, các tính năng như tài liệu thành phần tự động, hộp cát được kết xuất và nhiều tính năng khác đều có sẵn ngoài hộp. Bit thực hiện phép thuật của mình bằng cách theo dõi các phụ thuộc của từng thành phần và phiên bản nó thành một đơn vị mã độc lập. Nó cũng đảm bảo các thành phần được chia sẻ thực sự có thể tái sử dụng bằng cách xây dựng và thử nghiệm chúng trong một môi trường biệt lập, trước khi xuất chúng từ các dự án địa phương của chúng sang một bộ sưu tập trong bit.dev.

4. Vue-router

Khái niệm định tuyến không nên mới đối với bạn nếu bạn quen thuộc với bất kỳ khung JavaScript nào khác. Bộ định tuyến được sử dụng để ánh xạ URL ứng dụng đến các thành phần. Vue-router thực hiện tốt điều này và hỗ trợ cấu hình bộ định tuyến dựa trên thành phần. Ngoài ra, nó cũng hỗ trợ các tham số bộ định tuyến, truy vấn và ký tự đại diện để cho phép định tuyến phức tạp. Các tính năng như hiệu ứng chuyển tiếp làm cho việc thay đổi tuyến đường hấp dẫn hơn đối với người dùng và liên kết với các lớp CSS hoạt động khiến cho bộ định tuyến vue cung cấp nhiều hơn so với các khung công tác khác.

Vue-router cũng cung cấp khả năng lựa chọn giữa lịch sử HTML5 hoặc chế độ băm. Điều này rất quan trọng vì nó ảnh hưởng đến trải nghiệm người dùng, đặc biệt là khi bản chất của ứng dụng yêu cầu người dùng điều hướng đến các trang trước đó.

5. VueX

Quản lý trạng thái là một vấn đề đáng kể mà nhiều nhà phát triển đấu tranh. Không có sự kiểm soát thích hợp của nhà nước sẽ có nghĩa là một ứng dụng có thể khó đoán trước. Vuex giúp giải quyết vấn đề này bằng cách tập trung tất cả các chức năng quản lý nhà nước và chỉ cho phép trạng thái bị đột biến theo cách có thể dự đoán được.

Đột biến được cho phép dựa trên Trạng thái, Chế độ xem và Hành động. Nhà nước xác định sự thật về ứng dụng; Chế độ xem hiển thị những sự thật này cho người dùng và các hành động khiến trạng thái thay đổi, khởi động lại chu kỳ đột biến. Vue-router cũng cung cấp các tính năng như gỡ lỗi thời gian không cấu hình và xuất / nhập ảnh chụp nhanh trạng thái.

6. Axios

Axios là một thư viện bên thứ ba phổ biến để tạo và quản lý các yêu cầu ajax. Sau đó là sự phân tách của vue-resource khác, thư viện Vue ajax chính thức của một lần trước đó từ kho lưu trữ của nó, sự lựa chọn của nhóm Vue là Axios. Điều này đã dẫn đến sự gia tăng mức độ phổ biến và sử dụng của Axios.

Đó là lý do chính đáng, mặc dù không phải là một phần của kho Vue chính thức, Axios rất giống với người tiền nhiệm của nó và là phổ quát, hỗ trợ hủy bỏ và có định nghĩa TypeScript. Một trong những lưu ý khi sử dụng Axios là, nếu máy chủ của bạn không hỗ trợ lời hứa, bạn cần phải tự cung cấp một polyfill.

7. Vuetify

Vuetify, đúng như tên gọi của nó, là sự kết hợp của các từ "Vuevà" và Beaut Beautify, và sẽ làm điều đó cho ứng dụng của bạn. Đây là một thư viện thanh lịch gồm các thành phần UI thủ công có thể giúp bạn tạo các ứng dụng đẹp ngay cả khi bạn không phải là nhà thiết kế.

Nó cung cấp hơn 80 thành phần dựa trên Đặc tả thiết kế vật liệu với giàn giáo dự án được làm sẵn thông qua plugin Vue CLI. Hỗ trợ SSR cũng được tích hợp. Các thành phần này bao gồm Cảnh báo, Biểu ngữ, Huy hiệu, Nút, Nhập và điều khiển biểu mẫu, tiện ích tiến trình và nhiều hơn nữa.

8. Vue Apollo

GraphQL là một công cụ linh hoạt để khai thác sức mạnh của API. Nó cho phép bạn truy vấn đúng dữ liệu mà bạn yêu cầu cho ứng dụng hoặc chức năng của mình. Vue Apollo là một trong những cách thuận tiện nhất để sử dụng GraphQL cho Vue.

Các thành phần Apollos giúp sử dụng GraphQL theo cách khai báo thực sự. Về cốt lõi, Apollo cung cấp Ngôn ngữ Schema cho ứng dụng back-end và Ngôn ngữ truy vấn cho giao diện người dùng để trao đổi dữ liệu dễ dàng. Nó cũng hỗ trợ SSR để HTML của bạn có thể được hiển thị ở phía máy chủ.

9. Mocha

Kiểm tra là một khía cạnh quan trọng của bất kỳ ứng dụng. Nó đảm bảo rằng sự mong đợi của khách hàng được đáp ứng và sự phát triển đã được thực hiện một cách thích hợp. Điều này càng trở nên quan trọng hơn đối với các ứng dụng được xây dựng bằng Vue hoặc bất kỳ khung JavaScript nào nói chung.

Mặc dù nhiều khung có thể được sử dụng cho mục đích này, chúng tôi đã chọn Mocha vì nó chạy trên cả back-end thông qua Node.JS và front-end. Điều này làm cho thử nghiệm không đồng bộ vừa thuận tiện vừa có ý nghĩa hơn vì cả hai đầu của quá trình đều được xác minh. Khả năng ánh xạ các ngoại lệ chưa được phát hiện đến các trường hợp thử nghiệm có liên quan trên GitHub giúp việc theo dõi và giải quyết chúng thuận tiện hơn nhiều.

10. Vue.js DevTools cho trình duyệt

Gỡ lỗi là điều cần thiết cho một quá trình phát triển hiệu quả. Hầu như không thể tìm ra điều gì đang xảy ra với ứng dụng của bạn mà không có công cụ sửa lỗi tốt. Tùy chọn nào tốt hơn chúng ta có thể thêm vào danh sách của mình, ngoài công cụ gỡ lỗi chính thức được đề xuất Vue JS.

Nó có các plugin cho cả Firefox và Chrome và cũng là một ứng dụng Electron độc lập hoạt động với mọi môi trường. Các plugin trình duyệt thêm tab Vue Cảnh vào các triển khai công cụ dành cho nhà phát triển riêng của họ làm cho trải nghiệm gỡ lỗi trở nên mượt mà và thân thiện với người dùng.

11. Official Vue.js Guide

Cuối cùng nhưng không kém phần quan trọng, nếu chúng ta thu hút sự quan tâm đến Vue và tất cả các công cụ tuyệt vời mà nó bao gồm, hướng dẫn Vue JS chính thức là nơi tốt nhất để tìm hiểu thêm. Hướng dẫn có sẵn cho tất cả các phiên bản hiện tại và quá khứ của Vue, để bạn có thể tận dụng tối đa cho dù bạn mới bắt đầu hoặc đang tìm cách cải thiện hoặc mở rộng ứng dụng hiện có được xây dựng dựa trên phiên bản Vue cũ hơn. Bạn cũng có thể dễ dàng so sánh các thành phần đã thay đổi như thế nào trong lịch sử phiên bản. Ngoài ra, video, phân đoạn mã và ứng dụng tương tác được tích hợp để làm cho hướng dẫn tương tác nhiều hơn và dễ hiểu hơn. Phần cuối cùng của hướng dẫn cung cấp một so sánh hữu ích giữa các khung khác như React và Angular. Điều này cung cấp một cách hấp dẫn cho các nhà phát triển đã quen thuộc với các khung như vậy để thích ứng với Vue.

Kết luận

Bạn có thích danh sách của chúng tôi? Chúng tôi hy vọng rằng điều đó đã tạo ra hứng thú với bạn để tìm hiểu Vue hoặc thử một số công cụ này ngay cả khi bạn đã quen thuộc với Vue.

Những công cụ này có thể làm cho quá trình phát triển của bạn hiệu quả hơn, cho dù bạn mới bắt đầu hay là một nhà phát triển có kinh nghiệm.

Nguồn: https://blog.bitsrc.io/top-10-vuejs-developer-tools-becd61375447