Tutorial básico de Vue.js. Cómo empezar con este framework?

¿Cómo empezar con Vue.js?

La forma más recomendable de crear el Vue.js proyecto es Vue CLI. Para instalarlo sólo tienes que escribir:

npm install -g @vue/cli


y, a continuación, cree un proyecto:

vue create proyecto-simple
 cd ./proyecto-simple

Por último, puede ejecutar su proyecto:

npm run serve

Crear un componente sencillo

Gracias a webpack y al plugin vue-loader podemos crear componentes en .vue archivos. Cada componente incluye la plantilla con una vista HTML, un guión con lógica y estilo con estilo CSS.

Vamos a crear VArtículo.vue componente en simple-project/src/components/VArticle.vue y el siguiente contenido:

<div class="article">
<h1 class="article__title">(( articulo.titulo ))</h1>
<p><span class="article__author"><br>(( articulo.autor ))<br></span></p>
<p class="article__lead">(( articulo.lead ))</p>
</div>
</>

Para utilizar un componente creado previamente, debemos configurar simple-project/src/App.vue contenido del archivo a:

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

Ahora, al abrir un navegador en http://localhost:8080/ deberías ver una pantalla como

¿Y ahora qué?

En este tutorial, he intentado mostrarte cómo empezar tu aventura con el framework Vue. Si tienes curiosidad por saber cómo crear componentes más avanzados, seguro que los encontrarás en nuestro código abierto volver aendar proyecto.