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


laravel echo y heroku

Estoy desarrollando una plataforma que tiene una mensajería en real time, y para eso estamos usando laravel echo, con socket io y redis. Localmente funciona perfecto, pero cuando subimos a heroku, no podemos asignarle el puerto dinámico que nos asigna aleatoriamente heroku en cada deploy.

Usaron laravel echo alguna vez? Saben cómo implementaron en heroku? ...

Vistas en laravel

Hola, soy nuevo en laravel y estoy iniciandome por aca, mi duda, es simple, entre comillas, necesito mostrar en una vista con response json 3 tablas q no estan relacionadas entre si. haber lo he echo para el reporte y me sale , pero no se como concatenarlas para mostrarlas en la vista. para mostrar el pdf mas menos he echo esto: public function funcion() { $ta...

Filtro para reportes con rango de fecha desde hasta

Este codigo me funciona bien hace lo que necesito solo que no me captura el valor de los input del formulario para que se realice la consulta que puede ser

//Ruta Route::get('reportepordia', 'CobrodefacturaController@filtrar')->middleware('auth');

//Controller

public function filtrar(Request $request) { $users = $request->users; $fechaInicial...

Filtrar entre 2 fechas, y calcular totales de los datos filtrados

Hola que tal, soy nuevo con Laravel. Tengo la tabla RECIBOS, y necesito hacer reportes quincenales (2 por mes) donde se muestre el total quincenales de las columnas IMPORTE y REGARGO (las 2 en 1 solo total). Tambien necesito poder consultar los recibos emitidos entre 2 fechas. Cualquier ayuda me va servir. Muchas gracias!!...