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


envio de mail desde el propio mail de usuario autentificado

hola, como puedo enviar los mails desde laravel, pero obteniendo el mail del usuario autentificado y que se envie con el correo electronico de este? Es decir, que si el mail de user autentificado es nada@nada.es, el mail salga desde laravel enviado a traves de esa direccion de correo electronico..gracias...

Como instalar el ckeditor en vuejs?

https://github.com/dangvanthanh/vue-ckeditor2...

Como insertar una imagen en un reporte con Laravel Excel maatwebsite

Necesito ayuda con un reporte que estoy haciendo: para empezar requiero de que mi reporte en excel tenga el logo de la empresa en la parte superior de el reporte, luego tambien nesecito que algunos graficos que genero se muestren en imagen dentro del reporte. ya he tengo reportes con multiples hojas y diversos estilos. lo unico que me faltaria seria poner una o varias imagene...

agregar una columna originada de una variable a un select para hacer un insert

/en php -mysql/ /esto funciona con php , pero no logro hacerlo en laravel query builder/