net

Vue.js and Webpack

Above Vue focuses on

building user interfaces,

only working in the ‘view

layer’

installed and available on your system, then open
up your command line (or terminal) and enter in the
following command to install the vue-cli globally on
your local system:

$ npm install -g vue-cli

Now that we’ve installed the vue-cli globally, we
can go ahead and install Webpack, which is a build
tool that puts all of your assets, including JavaScript,
images, fonts and CSS, in a dependency graph. To
explain what makes Webpack the best build tool
to use – not just with Vue.js, but with most other
JS frameworks – would be a tutorial in itself, so we
won’t go into much detail on what Webpack does,
we’ll just touch on certain areas when needed. So to
install Webpack we need to go back to our command
line/terminal and enter the following command:

$ vue init webpack vueapp

What this will do is download a project folder called
vueapp using the Webpack template. Executing the
command brings up a few questions on the command
line and you can click enter or no to all the questions.
The next step is to change into this new directory
using the following command:

$ cd vueapp

WEBPACK’S HOT RELOAD
We can now run the app using the run dev command.
This will automatically open up your app on your
localhost port and you’ll be presented with the basic
Vue SPA on a local development server. The great
thing about this development server is the ‘hot
reload’ or ‘Hot Module Replacement’ functionality,
which changes and saves your application while
it’s still running. This can significantly speed up
development in a few ways:

ORetain application state, which normally gets lost
during a full reload.

OSave valuable development time by only updating
what has changed.

$ npm run dev

SINGLE FILE COMPONENT
Inside the src folder you’ll see a folder called
components. Open that up and you’ll see a component
called HelloWorld.vue. This is what is called a ‘Single
File Component’ and is where we will place all of our
code. So go ahead and open this up in your text editor

and then delete everything between the hello class

div that’s inside the template tag. Leave the script as

it is and remove any CSS. Then open up the App.vue

file and delete the CSS and the image src link that’s

pointing to the Vue.js logo. Now we should have a

blank canvas to work from.

<template>

<div class=”hello”>

</div>

</template>

SASS LOADER

When we come to add in our CSS, we want to be able

to use Sass (scss). However, Webpack/Vue doesn’t

recognise Sass as yet, so we need to install the

Sass loader using npm so it gets added to our dev

dependencies. We can then include SCSS files into

our components (about which we will go into more

detail later).

$ npm install sass-loader node-sass --save-dev

With all our dependencies installed and our

HelloWorld single file component cleaned out, we

can begin to add in some new content. So within the

component, go to the script section and change the

title string and add a new subtitle and string within

the return block, as shown.

export default {

name: “HelloWorld”,

data() {

return {

title: “The Vue Outside”,

subTitle: “Begin your own journey”

};