Vue.js basics tutorial. How to start with this framework?

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


and then create a project:

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>&nbsp;</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.