La forma tradicional de organizar el código cuando desarrollamos un sitio es:
Crear una componente llamada 'tarjeta' que permita mostrar un recuadro con un título y un cuerpo. Organizar todo el proyecto en los tres archivos clásicos.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="aplicacion">
<tarjeta titulo="Título de la tarjeta" ancho="30%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis dui.</p>
</tarjeta>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="rutinas.js"></script>
</body>
</html>
Vue.component('tarjeta',{
props:['titulo','ancho'],
template: `
<div v-bind:style="{'width':ancho}" class="tarjeta">
<h1 class="titulo-tarjeta">{{titulo}}</h1>
<slot>Cuerpo tarjeta</slot>
</div>
`
})
new Vue({
el:'#aplicacion'
})
.tarjeta {
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
background-color: #dcdcdc;
}
.titulo-tarjeta {
background-color:#2196F3;
color:white;
}
Esta forma de encarar un proyecto es perfectamente válido si el mismo es de tamaño pequeño o mediano.
Hemos dicho que Vue.js es un framework progresivo, esto significa que podemos trabajar administrando y organizando los archivos a nuestra necesidad, pero si queremos desarrollar un proyecto grande en Vue donde participen muchos desarrolladores, Vue nos provee una serie de herramientas y metodologías específicas para construirlo.
A partir del próximo concepto empezaremos a trabajar con Vue utilizando estas herramientas.