Tutorial básico do Vue.js. Como começar com esta estrutura?

Como começar com Vue.js?

A forma mais recomendada de criar o Vue.js projeto é Vue CLI. Para instalá-lo basta digitar:

npm install -g @vue/cli


e, em seguida, criar um projeto:

vue create simple-project
 cd ./simple-project

Finalmente, pode executar o seu projeto:

npm run serve

Criar um componente simples

Graças ao webpack e ao plugin vue-loader, podemos criar componentes em .vue ficheiros. Cada componente inclui o modelo com uma vista HTML, um guião com lógica e estilo com estilo CSS.

Vamos criar simples VArtigo.vue componente em simple-project/src/components/VArticle.vue e o seguinte conteúdo:

<div class="article">
<h1 class="article__title">(( artigo.título ))</h1>
<p><span class="article__author"><br>(( artigo.autor ))<br></span></p>
<p class="article__lead">(( artigo.lead ))</p>
</div>
</>

Para utilizar um componente criado anteriormente, precisamos de definir simple-project/src/App.vue conteúdo do ficheiro para:

<div>
<div>&nbsp;</div>
</div>
</>

Agora, quando abre um browser no http://localhost:8080/ deverá ver um ecrã como este:

O que é que se segue?

Neste tutorial, tentei mostrar-lhe como começar a sua aventura com a estrutura Vue. Se tiveres curiosidade em saber como criar componentes mais avançados, irás certamente encontrá-los no nosso código aberto vuelendar projeto.