Vue.js is a progressive framework that makes it easy to build web-based applications. It lets you compose complex UIs from small and isolated pieces of code called 'components'. Declarative views make your code more predictable and easier to debug.
The most recommended way to create the Vue.js project is Vue CLI. To install it just type:
npm install -g @vue/cli
and then create a project:
vue create simple-project
cd ./simple-project
Finally, you can run your project:
npm run serve
Thanks to webpack and vue-loader plugin we can create components in .vue files. Every component includes the template with an HTML view, a script with logic and style with CSS styling.
Let's create simple VArticle.vue component in simple-project/src/components/VArticle.vue file, and the following content:
<template>
<div class="article">
<h1 class="article\_\_title">
{{ article.title }}
</h1>
<span class="article\_\_author">
{{ article.author }}
</span>
<p class="article\_\_lead">
{{ article.lead }}
</p>
</div>
</template>
<script>
export default {
props: {
article: Object
}
}
</script>
<style>
.article {
margin-bottom: 20px;
border: 1px solid #BBBBBB;
display: inline-block;
padding: 20px;
min-width: 400px;
}
.article\_\_title {
font-weight: bold;
}
.article\_\_author {
font-size: 12px;
}
.article\_\_lead {
font-weight: 300;
}
</style>
To use a previously created component we need to set simple-project/src/App.vue file content to:
<template>
<div>
<div
v-for="article in articles"
:key="article.id"
>
<v-article
:article="article"
/>
</div>
</div>
</template>
<script>
import VArticle from './components/VArticle.vue'
export default {
name: 'app',
components: {
VArticle
},
data () {
return {
articles: \[{
id: 1,
title: 'Article 1',
lead: 'This is lead of first article',
author: 'John'
}, {
id: 2,
title: 'Article number two',
lead: 'This is lead of second article',
author: 'Lukasz'
}\]
}
}
}
</script>
Now when you open a browser on http://localhost:8080/ you should see a screen like: 
In this tutorial, I've tried to show you how to start your adventure with the Vue framework. If you are curious about how to create more advanced components, you will certainly find them in our open source vuelendar project.
