Estructura del Proyecto con HTML y BOOTSTRAP

↑ Me gusta (0)

Es hora de empezar con el desarrollo de nuestro proyecto y lo primero que vamos a realizar es crear la estructura html y sus correspondientes clases de bootstrap para el diseño del Workshop con VUEjs 2. Lo primero que vamos a necesitar son los recursos de las tecnologías a implementar en nuestro proyecto. Como por ejemplo Vuejs, nos dirigimos a su página oficial y nos descargamos el código fuente tanto de su versión de desarrollo enlace, coma la versión de producción enlace.

En este proyecto también vamos a utilizar la tecnología de Bootstrap pero en este caso no lo descargamos, simplemente utilizamos el enlace a su CDN y específicamente al archivo CSS, la página para conseguir el enlace es la siguiente: enlace.

 

Estructura HTML

Dentro del proyecto denominado “Mi primer proyecto VUEjs” creamos un nuevo archivo llamado index.html y en su interior agregamos las etiquetas necesarias de una estructura html.

Como anteriormente ya guardamos los archivos Vuejs en nuestro proyecto, tenemos que agregar la referencia al cdn de bootstrap, esto lo añadimos dentro de la etiqueta con la siguiente línea <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />.

Dentro de la etiqueta y utilizando las clases del framework css bootstrap vamos añadiendo las etiquetas correspondientes a un contenedor, una fila y una columna que va a contener un título “Agregar una tarea” junto a una caja de texto para que el usuario ingrese el nombre de la nueva tarea.

En otra columna agregamos otro título con el texto “Lista de tareas” y a continuación una lista con dos elementos estáticos de ejemplo por el momento.

Creamos una segunda fila con una columna que va a contener una línea horizontal para separar los elementos superiores que hemos realizado y añadimos la etiqueta <pre></pre> con el texto “datos del objeto”, esto funcionará como un previsualizador de todos los datos que está guardando Vue.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <h1>Agregar una tarea</h1>
                    <input type="text" class="form-control">
                </div>    
                <div class="col-xs-6">
                    <h1>Listado de tareas</h1>
                    <ul class="list-group">
                        <li class="list-group-item">Elemento uno</li>
                        <li class="list-group-item">Elemento dos</li>
                    </ul>
                </div>
            </div>            
            <div class="row">
                <div class="col-xs-12">       
                    <hr>                     
                    <pre>
                        datos del objeto
                    </pre>
                </div>
            </div>        
        </div>        
    </div>
</body>
</html>

Con esto ya tendríamos lista la interfaz del proyecto y que en el siguiente video vamos a dar vida por medio de Vue.

Italo Morales F. Italo Morales F. 3,230.00 XP