Building the Real Application Chapter 5Redefining the home page
Let's make our own view page for the home. For this, we can just modify the
HelloWorld.vue component. The .vue file should always start with a template. Hence, a
basic template for this file is:
<template>
<div>
</div>
</template>You can also include your style sheets and JavaScript codes definitions in this page, but it
will be much cleaner if we separate these out somewhere else.
Let's remove everything from HelloWorld.vue and add these lines of code:
<template>
<div>
Hello World
</div>
</template>We also don't need a Vue.js logo, so let's delete that as well from src/assets and the line
of code in App.vue:
<img src="./assets/logo.png">Now, if you revisit the URL http://localhost:8080/#/, you will see Hello World
rendered:
Segregating CSS
Time for segregating CSS. Let's create a folder inside the src/assets folder
called stylesheets and add a main.css file. Add the following line of code in main.css:
@import './home.css';