Estructura del Proyecto con HTML y BOOTSTRAP

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.

Inicia sesión para poder registrar las lecciones que has completado Login

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.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...

Concatenar valor de dos columnas en DataTables de modelos relacionados en Laravel

Hola, quisiera saber como concatenar los valores de dos columnas en datatables. Tengo dos modelos relacionados. La concatenación me funciona si la relación la hago por medio de inner join, pero quiero utilizar los modelos relacionados en Eloquent.

//De esta forma funciona la concatenación con inner join, pero si lo hago desde modelos relacionados no funciona
      {...