An introduction to Vue.js - Chapter 1 - Basic Setup
Tags: javascript, vue
Published: 2017-09-17 09:15:39

---
title: An introduction to Vue.js - Chapter 1 - Basic Setup
published: true
description: This is a simple introduction to Vue.js, starting with a simple setup
tags: javascript,vue
cover_image: http://timrijkse.nl/images/vue-full-guide.png
---

## Series overview

[Chapter 1](https://dev.to/neradev/an-introduction-to-vuejs---chapter-1---basic-setup)
[Chapter 2](https://dev.to/neradev/an-introduction-to-vuejs---chapter-2---components-part-i)
[Chapter 3](https://dev.to/neradev/an-introduction-to-vuejs---chapter-3---components-part-ii)
[Chapter 4](https://dev.to/neradev/an-introduction-to-vuejs---chapter-4---list)
[Chapter 5](https://dev.to/neradev/an-introduction-to-vuejs---chapter-5---conditional-rendering-c97)

## Foreword

I recently started working with Vue.js in a more deeper way. I figured out that it isn't that hard to get into it but will get harder after some time to get more insides into that area.

I decided to write a series of Vue guides how you could possible handle certain things in your project. I like the way I will describe to you but of course it is not the overall solution for healing the world. It just a best practice I figured out while working with Vue.

I will always upload the code to [this github repository](https://github.com/Neatoro/vue-guide).

So now lets start with our first chapter.

## Node.js Modules

First of all we need to setup a simple Node project. I would recommend you to do this via command line by using the `npm init` command which will do a small wizard with you to create the package.json. I removed some parts of the generated package.json and it finally looked like that:

```json
{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC"
}
```

Afterwards we would need to instal some Node modules for using Vue. The first one would be Vue itself.

```
npm install --save vue
```

I will use `webpack` as my "compiler" and babel as a transpiler. Moreover we will need `raw-loader` to load html files via ES6 Modules.

```
npm install --save-dev webpack babel-core babel-loader raw-loader
```

You should now have a `node_modules` folder and your package.json should look like that (the version strings could differ):

```json
{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}

```

## The Webpack Configuration

We will configure the webpack build through the `webpack.config.js`. For that we would need to create that file on the same level as the `package.json`.

First of all we need to define were the webpack should actually start "compiling". From my setup it should start from the file `src/main.js`.

```javascript
module.exports = {
    entry: './src/main.js'
};
```

Now we need to tell webpack were to put the bundled file. I love to put that into a separated folder called `bin` and the filename would be `build.js`.

```javascript
const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'bin'),
        filename: 'build.js'
    }
};
```

Since webpack works with loaders we would need to define which we would like to use (we installed `raw-loader` and `babel-loader`). The `babel-loader` we use for our .js files and `raw-loader` for .html files.

```javascript
const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'bin'),
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ]
    }
};
```

Now we need to define some alias to get Vue.js to work. The first one we need to import Vue.js in the correct and full version, the second one is to avoid later import path that could look like that: `../../../common/button/button` rather then doing `app/components/common/button/button`

```javascript
const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'bin'),
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
            app: path.resolve(__dirname, 'src')
        }
    }
};
```

That's it for now with our webpack configuration.

## NPM Scripts

Luckily npm offers a script function were we could execute commands from our command line with out creating a bunch of weird looking bash scripts executing stuff from the deep of our node_modules folder.

These scripts can be defined in our `package.json`.

```json
{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "scripts": {

  },
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}

```

I created a script called `build` and one called `build:js`.

```json
{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "scripts": {
    "build": "npm run build:js",
    "build:js": "webpack",
  },
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "npm-run-all": "4.1.1",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}
```

The `build` script currently calls only the `build:js` script but will later get more calls. The `build:js` executes webpack using our `webpack.config.js`.

## Some code

After configuring a bunch of stuff we now created some code to test the whole stuff and add another step to our `build` script.

First of all we need to create a `src` folder as we configured in our webpack configuration.

### index.html

Within that folder we add the `index.html` which should look like that:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Vue Guide</title>
</head>
<body>
    <div id="app"></div>

    <script src="build.js"></script>
</body>
</html>
```

The `index.html` includes our `build.js` generated by webpack. We need to copy that file over into the `bin` folder a well so I added another script called `deploy:resources` and called it in the `build` script (I installed `npm-run-all` via `npm install --save-dev npm-run-all` to ease the way of calling multiple npm scripts).

```json
{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "scripts": {
    "build": "npm-run-all build:js deploy:resources",
    "build:js": "webpack",
    "deploy:resources": "cp src/index.html bin/index.html"
  },
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "npm-run-all": "4.1.1",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}
```

### hello component

That part I will not explain for now. You can simply copy over the code. I will go deeper into that topic in one of the next chapters.


File path: `src/components/hello/hello.js`
```javascript
import template from './hello.html';

export default {
    name: 'vg-hello',
    template
};
```

File path: `src/components/hello/hello.html`
```html
<h1>Hello World</h1>
```

### main.js

This is not only our entry point for webpack  but although our file for instantiating Vue.

```javascript
import Vue from 'vue';

new Vue({
});
``` 

We need to tell Vue were to mount the app initially (render point in the DOM which is in our case the `div` with the id `app`).

```javascript
import Vue from 'vue';

new Vue({
}).$mount('#app');
```

Finally we would need to tell Vue which component to render a startup.

```javascript
import hello from 'app/components/hello/hello';
import Vue from 'vue';

new Vue({
    render: (h) => h(hello)
}).$mount('#app');
```

## Done

We you now run `npm run build` from your command line you should find a `bin` folder with a `build.js` and `index.html`. Open that `index.html` in your favourite web browser (e.g. Chrome or Firefox) and you should the "Hello World".

## Last words

I hope you like that way of describing the setup of a Vue project. I know there are a lot of different ways to do so (e.g. not using webpack, using .vue files, ...) but I like the way using ES6 modules. If you have some feedback, feel free to add it and if you have questions, just ask them on [Twitter](https://twitter.com/neradev) or in the comment section. I will try to answer as much as possible.

[Next Chapter: Components (Part I)](https://dev.to/neradev/an-introduction-to-vuejs---chapter-2---components-part-i)