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.
How to start with Vue.js?
The most recommended way to create the Vue.js project is Vue CLI. To install it just type:
npm install -g @vue/cli
vue create simple-project
cd ./simple-project
Finally, you can run your project:
npm run serve
Create a simple component
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:
<div class="article">
<h1 class="article__title">(( article.title ))</h1>
<p><span class="article__author"><br>(( article.author ))<br></span></p>
<p class="article__lead">(( article.lead ))</p>
</div>
</>
To use a previously created component we need to set simple-project/src/App.vue file content to:
<div>
<div> </div>
</div>
</>
Now when you open a browser on http://localhost:8080/ you should see a screen like: 
What’s next?
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.
