Getting started with Vue 2

This tutorial will cover how to make your first vue app and running. We will be creating two component and use one inside another component to know the basics of vue

We will using vue-cli to initiate the project repo. Vuejs offers some of the templates which can be checked here — https://github.com/vuejs-templates
We will be using webpack-simple to generate our first project.

For using vuejs templates we must have vue-cli installed

Installation

Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.

$ npm install -g vue-cli

Usage

$ vue init <template-name> <project-name>

Example — vue init webpack-simple vue-guide

It will generate the project folder with basic webpack + vue-loader setup vue

cd into the project folder

npm install — It will install all the required dependency

npm run dev It will start your project at http://localhost:8080

It will serve the index.html file withsrc/App.vueas root component, we will make a new directory inside src folder namedcomponents where we will have our all the components that will be reusable across the app

Now, Let’s write our firstcomponent that will be src/components/Hello.vue Ideally the vue component consists of three things

<template>
</template>
<script>
  export default {
  }
<script>
<style>
</style>

Vue gives the flexibility of writing plain html and css inside the component unlike React , Inside thetemplate section we can define the html and inside style section, we can define the styling for the component.

In Our Hello.vue component we will simply add some basic html and then use this component

<template>
<div>
<h1>Hello World</h1>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
h1{
color:blue;
}
</style>

Adding scoped to the style tag make the styling valid for that component only

Now we are done with the Hello.vue component , we will be using this component inside App.vue

In our App.vue we will be importing this component

Inside the scripttag in App.vueimport the Hello component

Now we will tell our App.vue component to use the hello component

import Hello from './components/Hello.vue'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
hello:Hello
}
}

My script section looks like this and we are almost done using the Hello component

To use the Hello component we will add

<hello></hello>

inside the template section of the App.vue and we are done :)

Now when you refresh your browser then it will show up something like this

This was just the very basic of starting with vue using vue-cli.

You can play with the source code here -https://github.com/mbj36/vue-guide

Learn more about the vuejs — https://vuejs.org/
Vuejs templates—https://github.com/vuejs-templates