uncleLian/vue2-news

📱 Mô phỏng Today's Headline trên web với Vue 2

Dự án mở nguồn thực hành cách xây dựng một ứng dụng tin tức đơn trang (SPA) giống hệt phiên bản di động của Today's Headline.

vue2-news là một dự án mẫu dùng Vue 2 kết hợp Vue Router, Vuex và Mint-UI để xây dựng giao diện ứng dụng tin tức trên thiết bị di động. Dự án bao gồm bốn trang chính hỗ trợ đầy đủ các chức năng như duyệt bài, tìm kiếm, đọc tin và chia sẻ. Đây là phần hai trong series học Vue của tác giả, dành cho người mới muốn tiếp cận framework một cách thực tế.

✨ Điểm nổi bật

• Giao diện 4 trang: Trang chủ, chi tiết tin, tìm kiếm và trang tải về.
• Tương tác phong phú: Hỗ trợ kéo lên/xuống để tải thêm nội dung, vuốt trái/phải để chuyển đổi giữa các kênh tin.
• Chuyển hướng bằng cử chỉ: Dùng directive tùy chỉnh để hỗ trợ nhấn vào thanh tiêu đề quay lại đầu trang và vuốt phải để quay lại trang trước.
• Phát video tích hợp: Hỗ trợ hiển thị trạng thái tải và phát lại video cùng chức năng hiển thị trên nền tảng.
• Tìm kiếm thông minh: Hiển thị gợi ý từ khóa và nội dung đề xuất, đồng thời đánh dấu từ khóa tìm kiếm.
• Chia sẻ & mở rộng: Cho phép người dùng chia sẻ bài viết và mở rộng đọc toàn bộ nội dung khi cần thiết.
• Tối ưu trải nghiệm mobile: Cấu hình riêng cho Mint-UI để cải thiện cảm ứng kéo và trượt.

💡 Vì sao đáng chú ý

dự án mang lại cách tiếp cận thực tiễn để học Vue 2 thông qua việc xây dựng một ứng dụng tin tức hoàn chỉnh với đầy đủ các tính năng người dùng cần. Không chỉ là mẫu giao diện, vue2-news còp các kỹ thuật như quản lý trạng thái bằng Vuex, định tuyến SPA bằng Vue Router và tối ưu hiệu suất trên thiết bị di động.

Dù API đã ngưng hoạt động, dự án vẫn giữ giá trị cao cho việc học và tham khảo cách cấu trúc dự án Vue thực tế.

---

#VueJS #Vue2 #TodayHeadline #OpenSource #TiniX