Tạo landing page đếm ngược ngày đến tết với Vue/Vue-cli

Tram Ho

Giới thiệu

Chào các bạn, hiện tại VueJS đã là một trong những javascript framework lớn nhất hiện nay với hơn 155K ⭐️ trên Github. Hiện tại gần tết rồi, chắc mọi người sẽ mong ngóng tết đến và đếm lùi ngày đến tết =))
Trong bài viết này mình sẽ giới thiệu về Vue-CLI và tạo một landing page đếm lùi ngày đến tết các bạn nhé

Vue-CLI

Vue-CLI là một CLI (CLI – Command Line Interface) giúp xây dựng một Vue template project nhanh chóng thông qua các command line.

Cài đặt

Chúng ta có thể cài đặt Vue-CLI thông qua NPM hoặc Yarn, tất nhiên là máy đã cài node các bạn nhé 😄
Cài đặt thông qua command:

Tương tự với Yarn

Init project

Để tạo project mới qua Vue-CLI chúng sử dụng command:

Sau khi chạy bạn sẽ được hỏi về một số option như: Tên project, mô tả, sử dụng bộ complie nào, có sử dụng ESlint hay không, có unit test hay không,…?

Sau khi tạo xong project:

Code flow, Project structure

Một số command được setting sẵn, các bạn có thể tìm thấy ở file README.md

Project structure:

build: Build project thông qua webpack.

config: Chứa config về webserver, env.

node_modules: Chứa các modules được kéo về qua NPM/Yarn.

src: Chúng ta sẽ code Vue tại đây.

static: Chứa các static resources.

Code flow

Sau chạy command npm run dev, lúc này một server ảo sẽ chạy tại cổng 8080, có tác dụng serve file index.html.

Trong thư mục src, file main.js sẽ được chạy đầu tiên, Vue app sẽ được tạo tại đây

Vue app khởi tạo đồng thời sẽ render một component có tên là App, chính là file App.vue

Trong App component, có một component là <router-view/>, component này có tác dụng inject các component con dựa vào router.
Router của Vue app lúc này sẽ là file src/router/index.js

Vậy khi bạn truy cập vào http://localhost:8080/ component HelloWorld sẽ được inject vào bên trong component App

Xây dựng landing page đếm ngược

Sau khi hiểu về luồng và cấu trúc thư mục, chúng sẽ bắt đầu xây dựng một component mới các bạn nhé

Chỉnh sửa lại sample code

Mình vẫn sẽ giữ nguyên luồng chạy của Vue app, tại file /src/App.vue mình sẽ bỏ bớt code mẫu đi, chỉ giữ lại:

Tại /src/components chúng ta sẽ tạo component mới tên là CountDown.vue, đồng thời sẽ sửa lại router một chút, khi truy cập / sẽ render component CountDown thay cho HelloWorld

Mình sẽ template trước khi xử lý logic:

Lưu ý: Những file ảnh chúng ta sẽ đặt tại thư mục /src/assets

Sau khi xong template, lúc này bắt đầu xử lý logic các bạn nhé 😃

Đếm ngược

Trong một Vue component sẽ có các method đại diện cho từng giai đoạn của Lifecycle Hooks.
Tại method created:

Khi component được tạo chúng sẽ sử dụng method setInterval với step là 1s với mục đích là 1s sẽ lấy lại thời gian hiện tại 1 lần, sau đó xử lý tính toán tại method calculateETA

const destinationDate = new Date('2020-01-25').setHours(0, 0, 0, 0) chính là mùng 1 Tết, vì Việt Nam ở múi giờ +7, nếu new Date('2020-01-25') sẽ trả về kết quả là 7h sáng ngày 25/01/2020, vậy nên cần set thêm setHours(0, 0, 0, 0) để thời gian chính là giao thừa các bạn nhé 😄

Như vậy xem như đã hoàn thành rồi, nhưng chúng ta sẽ chỉnh lại một chút để cho đồng bộ số degit, vì ngày hiện tại có 2 chữ số, mà giờ, phút, giây nếu <10 chỉ có một, trông không đẹp cho lắm nhỉ =))

Thêm một số computed:

Đổi lại template

Okay, vậy là đã hoàn thành rồi…
Truy cập vào http://localhost:8080/ để xem thành quả nào 😄

Tại thời điểm mình viết bài hơn 2 tuần nữa mới tết cơ =))

Sau khi hoàn thành, nếu muốn deploy các bạn có thể sử dụng npm run build, webpack sẽ build project ra các file tại /dist.
Lưu ý file index.html cần chạy qua webserver mới có thể hiển thị được các bạn nhé.

Code demo: https://github.com/hoangtm1601/bao-gio-den-tet

Xem luôn bao giờ đến tết: https://hoangtm1601.github.io/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo