Create a landing page that counts down the days until Tet with Vue / Vue-cli

Tram Ho

Introduce

Hello everyone, VueJS is currently one of the largest javascript frameworks today with more than 155K ⭐️ on Github. Now that it is near Tet, everyone will look forward to Tet and count down the days until Tet =)) In this article, I will introduce Vue-CLI and create a landing page to count down the days until Tet.

Vue-CLI

Vue-CLI is a CLI (CLI – Command Line Interface) that helps build a Vue template project quickly through the command line.

Setting

We can install Vue-CLI through NPM or Yarn, of course, the machine has installed the node 😄 Installation via command:

Similar to Yarn

Init project

To create a new project via Vue-CLI they use the command:

After running you will be asked about some options such as: Project name, description, use of complie set, use ESlint or not, unit test or not, …?

After creating the project:

Code flow, Project structure

Some commands have been installed, you can find in the file README.md

Project structure:

build : Build project through webpack.

config : Contains config on webserver, env.

node_modules : Contains modules that are pulled back via NPM / Yarn.

src : We will code Vue here.

static : Contains static resources.

Code flow

After running the command npm run dev , this time a virtual server will run at port 8080 , npm run dev serve index.html file.

In the src directory, the main.js file will be run first, the Vue app will be created here

The Vue app initializes and renders a component named App, which is the App.vue file

In the App component, there is a component called <router-view/> , which injects child components based on the router . The Vue app’s router will now be the src/router/index.js

So when you access http://localhost:8080/ component HelloWorld will be injected into the App component

Build a landing page countdown

After understanding the flow and directory structure, they will start building a new component

Edit the sample code

I will still keep the running stream of the Vue app, in the file /src/App.vue I will remove the sample code, just keep:

At /src/components we will create a new component named CountDown.vue , and will repair the router a bit, when accessing / will render the CountDown component instead of HelloWorld

I will template before processing the logic:

Note: The image files we will place in /src/assets

After completing the template, this time start processing logic of you 😃

Countdown

In a Vue component, there will be methods that represent each stage of the Lifecycle Hooks. At the created method:

When components are created, they will use the setInterval method with a step of 1s with the purpose of 1s to get the current time once, then process the calculation in the calculateETA method.

const destinationDate = new Date('2020-01-25').setHours(0, 0, 0, 0) is the first day of Tet, because Vietnam is in the time zone +7, if new Date('2020-01-25') will return the result is 7am on January 25, setHours(0, 0, 0, 0) , so need to set more setHours(0, 0, 0, 0) so that the time is Eve 😄

So it looks like it is done, but we will adjust a bit to synchronize the number of degit, because the current date has 2 digits, but hours, minutes, seconds if <10 is only one, does not look good for very much =))

Add some computed:

Return the template

Okay, so that’s done … Go to http://localhost:8080/ to see what the result is 😄

At the time of writing more than 2 weeks, Tet holiday =))

Once completed, if you want to deploy you can use the npm run build , the webpack will build the project in /dist files. Note the index.html file needs to run through the webserver to be able to display you guys.

Demo code: https://github.com/hoangtm1601/bao-gio-den-tet

See always until Tet: https://hoangtm1601.github.io/

Share the news now

Source : Viblo