net

PROJECTS
Vue.js and Webpack

Above Within the

component, go to the script

section and then change

the title string

Right You’ll need to add a

logo and background image

to the assets directory

}

};

ADD THE HTML

At the very top of our component we have the

<template> tag. This is where all of our markup will

go. Within the class div that we left in, go ahead and

add in the markup shown. One thing you’ll notice

is that we’ve used the BEM naming convention on

classes and IDs. However, you don’t have to abide to

that, using the standard naming convention is fine.

Then you’ll need to add a logo and background image

to the assets directory. Lastly we used what is called

text interpolation using the “Mustache” syntax

(double curly braces). This data binding at its basic

form enables us to bind data to the Vue instance.

<header class=”header”>

<div class=”header__logo-box”>

<a href=”index.html”>

<img src=”../assets/imgs/logo.svg” alt=”Outdoors

Logo” class=”header__logo”>

</a>

</div>

<div class=”header__text-box”>

<h1 class=”heading-primary”>

<span class=”heading-primary--main”>

{{ title }}

</span>

<span class=”heading-primary--sub”>

{{ subTitle }}

</span>

</h1>

<a href=”#” class=”btn btn--white btn--

animated”>Discover Vue</a>

</div>

</header>

SCOPED CSS

One of the great things about using Single File

Components is the ability to add our CSS straight

into the component, which is only specific to that

component. So for instance, if you split up your

application into three different components, such

as the Header, Sidebar and Footer, you can just

add the CSS that styles the header into the Header

component and add the CSS that styles the sidebar

into the Sidebar component and so on. We can make

sure our CSS is specific to that component by adding

in the keyword scoped as shown. Plus we also need to

specify what CSS preprocessor we will be using and

in our case it’s Sass/scss.

<style lang=”scss” scoped>

</style>

@IMPORTING CSS

Because we’re using Sass, we’ve created a few

variables to use and to help keep our file structure

clean, we’ve stored these in their own file located

in a folder called Sass. We can (as normal) use the

@import rule to pull in this file. Or you can simply add

them at the top. Plus we want to use a Google font

called ‘Lato, so we can import that in too. ’

// header gradient

$blueGradient: rgba(103, 188, 223, .8);

$lightGreen: rgba(188, 219, 183, .9);

$pinkGradient: rgba(217, 105, 142, .8);

$midGreen: rgb(85, 197, 122);

$darkGreen: #28b485;

$white: #fff;

$mainFontColor: #777;

$font: ‘Lato’, sans-serif;

@import “sass/_variables.scss”;

@import url(“https://fonts.googleapis.com/

css?family=Lato”);

THE HEAD SECTION AND LOGO

We can start off by adding in our main background

image. This will be given the maximum view height

so it’s responsive to the browser window. We will

then add in a nice gradient overlaying our image

using our variables. Then we can nest our logo rules

and position that top left. There is an animation

property included but we will go over that in a

later step.

.header {

position: relative;