Curso de Vue JS - Tutorial en Español 😍 [Desde Cero] (Parte III)

Curso de Vue JS - Tutorial en Español 😍 [Desde Cero]


#16 Vista previa a estructura de Vue CLI 3 | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Generaremos un proyecto con el comando vue ui como lo vimos en la ultima parte de la parte II de este curso.
  • Nos centraremos luego en la carpeta src.
Nota: Recordemos que para iniciar el servidor escribimos en línea de comando:
$ npm run serve,
y luego para acceder a la página es con la url: http://localhost:8080/.
  • El archivo App.vue es el archivo principal. 

#17 Práctica Vue CLI 3 y Vuex | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Generaremos un proyecto con el comando vue ui como lo vimos en la ultima parte de la parte II de este curso.
  • Agregar los CDN de Bootstrap al archivo public/html.
  • Si aún no han levantado el servidor para ir probando la aplicación, entonces escribir en la línea de comando: npm run serve.
  • Crear el archivo src/components/Cabecera.vue (se recomienda comenzar el nombre de los nuevos componentes en mayúsculas para identificarlos como tal).
  • Codificar el archivo Cabecera.vue como se indica:
<template>
    <div class="text-center">
        <img alt="Vue logo" src="@/assets/solucionespp.png">
        <h1>Frutas</h1>
    </div>
</template>    

<script>
export default {
    name: 'Cabecera'
}
</script>
  • Agregar el nuevo componente en src/App.vue:
    • Importamos Cabecera.vue: import Cabecera from './components/Cabecera.vue' (El nombre Cabecera luego de import puede ser cualquier otro, y en la ruta del archivo a importar se deben respetar las mayúsculas y minúsculas).
    • Agregamos el elemento Cabecera al objeto components.
    • Agregamos la etiqueta: <Cabezera></Cabezera>, entre las etiquetas img y HelloWord en el div de template.
    • Eliminamos la línea: <HelloWorld msg="Welcome to Your Vue.js App"/>.
    • También la línea: import HelloWorld from './components/HelloWorld.vue'.
    • Y la línea: HelloWorld,.
    • Y finalmente el archivo src/components/HelloWord.vue (Porque no lo utilizaremos).
    • También borraremos los estilos ya que estamos trabajando con Bootstrap.
  • Crear el archivo src/components/Lista.vue.
  • Vamos a la página de bootstrap y copiamos el código html que se encuentra en documentación / componentes / Con insignias, y la pegamos en el template del archivo que acabamos de crear Lista.vue.
  • Archivo src/components/Lista.vue:
<template>
    <div>
        <ul class="list-group">
            <li v-for="(item, index) of frutas" :key="item.id" @click="aumentar(index)"
            class="list-group-item d-flex justify-content-between align-items-center">
                {{index+1}} - {{item.nombre}}
                <span class="badge badge-primary badge-pill">{{item.cantidad}}</span>
            </li>
        </ul>
        <button class="btn btn-danger btn-block" @click="reiniciar">Reiniciar</button>
    </div>
</template>    

<script>
import {mapState, mapMutations} from 'vuex';
export default {
    name: 'Lista',
    computed:{
        ...mapState(['frutas']),
        arrayOrdena(){
            return this.frutas.sort((a, b) => b.cantidad - a.cantidad)
        }
    },
    methods:{
        ...mapMutations(['aumentar', 'reiniciar'])
    }
}
</script>
  • Agregar el componente Lista al archivo App.vue.
  • Modificar el archivo src/store/index.js (en el vídeo se refieren al archivo src/store.js, pero creo que eso es obsoleto) y codificarlo como se indica:
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    frutas: [
      {nombre: "Manzana", cantidad: 0},
      {nombre: "Pera", cantidad: 0},
      {nombre: "Naranja", cantidad: 0}
    ]
  },
  mutations: {
    aumentar(state, index){
      state.frutas[index].cantidad++
    },
    reiniciar(state){
      state.frutas.forEach(elemento => {
        elemento.cantidad = 0
      })
    }
  },
  actions: {
  },
  modules: {
  }
})
  • Finalmente App.vue quedará así:
<template>
  <div id="app" class="container">
    <Cabecera></Cabecera>
    <Lista></Lista>
  </div>
</template>

<script>
import Cabecera from './components/Cabecera.vue'
import Lista from './components/Lista.vue'


export default {
  name: 'App',
  components: {
    Cabecera,
    Lista
  }
}
</script>

#18 Rutas con Vue (router-view) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Generaremos un nuevo proyecto a través de $ vue ui.
  • Al ejecutar el comando anterior, se genera un sitio local que nos permite administrar proyectos. En caso de que no lo estemos, navegaremos hasta el Administrador de Proyectos de Vue.
  • Clic en + Crear.
  • Seleccionar ruta en donde guardaremos el proyecto.
  • Clic en + Crear un nuevo proyecto aquí.
  • Dar nombre al proyecto.
  • Gestor de paquetes: npm.
  • Repositorio git: no.
  • Siguiente ->.
  • Selecciona un preset: Manual.
  • Siguiente ->.
  • Seleccionamos: Babel, Router y Vuex (desmarcar Linter / Formatter y todos los demás).
  • Siguiente ->.
  • Marcamos la opción Use history mode for router.
  • Clic en Crear proyecto.
  • En el cuadro de diálogo que aparecerá a continuación (Guardar como un nuevo preset) le damos clic en Continuar sin guardar.
  • Una vez creado el proyecto, damos clic en Tareas.
  • Seleccionamos Serve.
  • Clic en Ejecutar tarea.
  • Una vez que el circulito se completa de verde, damos clic en Abrir aplicación. 
  • Modificar archivo src/router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue' /*Eliminar*/

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/servicios',
    name: 'servicios',
    component: () => import(/* webpackChunkName: "servicios" */ '../views/Servicios.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
  • Crear archivo src/views/Servicios.vue y codificarlo como se indica:
<template>
    <div>
        <h1>Páginas de servicios</h1>
    </div>
</template>

#19 Router Link y Rutas con Parámetros | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Continua del vídeo anterior.
  • Modificar el archivo App.vue para que muestre la ruta de servicio.
  • Archivo src/App.vue:
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/servicios">Servicios</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
  • Crearemos una nueva ruta, para ello modificaremos el archivo src/router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/servicios',
    name: 'servicios',
    component: () => import(/* webpackChunkName: "servicios" */ '../views/Servicios.vue')
  },
  {
    path: '/fotos/:id',
    name: 'fotos',
    component: () => import(/* webpackChunkName: "fotos" */ '../views/Fotos.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
  • Creamos una nueva vista src/views/Fotos.vue y lo codificamos como se indica:
<template>
    <div>
        <h1>Galería de fotos</h1>
        <Foto />
    </div>
</template>

<script>
import Foto from "@/components/Fotografia.vue";

export default {
    components:{
        Foto
    }
    
}
</script>
  • Creamos una plantilla para la vista de foto src/components/Fotografia.vue y lo codificamos como se indica:
<template>
    <div>
        <h1>Foto desde componente: {{$route.params.id}}</h1>
    </div>
</template>

<script>
export default {
    name: 'Foto'
}
</script>

#20 Parámetros dinámicos y rutas a través de eventos | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Archivo src/views/Fotos.vue.
<template>
    <div>
        <h1>Galería de fotos</h1>
        <router-link :to="{name: 'fotos', params: {id: item}}" 
            v-for="(item, index) of fotosArreglo" :key="index">
            <button>foto {{item}}</button>
        </router-link>
        <Foto />
        <button @click="home">Home</button>
        <button @click="anterior">Anterior</button>
        <button @click="siguiente">Siguiente</button>
    </div>
</template>

<script>
import Foto from "@/components/Fotografia.vue";

export default {
    name: 'Fotos',
    components:{
        Foto
    },
    data(){
        return{
            fotosArreglo: [1, 2, 3]
        }
    },
    methods: {
        home(){
            this.$router.push('/')
        },
        anterior(){
            this.$router.go(-1)
        },
        siguiente(){
            this.$router.go(1)
        }
    },
}
</script>

#21 Bootstrap 4 + Vue [Instalación] | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Podemos partir del proyecto anterior.
  • En la terminal ejecutamos: $ npm i bootstrap-vue.
  • Ir a la página de Bootstrap + Vue.
  • En la pagina ir a Empezar para ver las instrucciones.
  • Archivo src/main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

#22 Navbar [Class Active] Bootstrap 4 + Vue | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • App.vue:
<template>
  <div id="app">
    <div id="nav">
      <b-navbar toggLeable="md" type="dark" variant="primary">
        <b-container>
          <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
          <b-navbar-brand href="#">NavBar</b-navbar-brand>
        </b-container>
        <b-collapse is-nav id="nav-collapse">
          <b-navbar-nav>
            <b-nav-item :to="{name: 'Home'}" exact>Home</b-nav-item>
            <b-nav-item :to="{name: 'About'}">About</b-nav-item>
            <b-nav-item :to="{name: 'servicios'}">Servicios</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
      <!--
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/servicios">Servicios</router-link>
      -->
    </div>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

#23 Columnas responsives [Row/Col] Bootstrap 4 + Vue | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • App.vue:
<template>
  <div id="app">
    <div id="nav">
      <b-navbar toggLeable="md" type="dark" variant="primary">
        <b-container>
          <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
          <b-navbar-brand href="#">NavBar</b-navbar-brand>
        </b-container>
        <b-collapse is-nav id="nav-collapse">
          <b-navbar-nav>
            <b-nav-item :to="{name: 'Home'}" exact>Home</b-nav-item>
            <b-nav-item :to="{name: 'About'}">About</b-nav-item>
            <b-nav-item :to="{name: 'servicios'}">Servicios</b-nav-item>
            <b-nav-item :to="{name: 'grid'}">Grid</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
      <!--
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/servicios">Servicios</router-link>
      -->
    </div>
    <b-container>
        <router-view />
    </b-container>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
  • Creamos una nueva vista src/views/Grid.vue:
<template>
  <div class="mt-5">
    <b-row>
        <b-col cols="12" md="6" lg="4">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </b-col>
        <b-col cols="12"  md="6" lg="8">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </b-col>
    </b-row>
   <b-row>
        <b-col cols="12" md="6" lg="4">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </b-col>
        <b-col cols="12"  md="6" lg="8">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </b-col>
    </b-row>   
  </div>
</template>

<script>
export default {
    name: 'Grid'
}
</script>
  • Modificamos el archivo src/router/index.js para incluir la nueva ruta:
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/servicios',
    name: 'servicios',
    component: () => import(/* webpackChunkName: "servicios" */ '../views/Servicios.vue')
  },
  {
    path: '/fotos/:id',
    name: 'fotos',
    component: () => import(/* webpackChunkName: "fotos" */ '../views/Fotos.vue')
  },
  {
    path: '/grid',
    name: 'grid',
    component: () => import(/* webpackChunkName: "grid" */ '../views/Grid.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

#24 Botones y Cards con Bootstrap 4 + Vue | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Crear nueva vista src/views/Cardas.vue:
<template>
  <div class="mt-5">
    <b-button variant="success">Button</b-button>
    <b-button variant="info">Button</b-button>
    <b-button variant="danger">Button</b-button>
    <b-button variant="primary">Button</b-button>
    <b-button variant="warning">Button</b-button>
    <b-button variant="dark">Button</b-button>

    <b-row class="mt-5">
        <b-col cols="12" md="4">
            <b-card
                img-src="https://picsum.photos/600/300/?image=25"
                img-top
            >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <b-button variant="info" href="/">Button</b-button>
            </b-card>
        </b-col>
        <b-col cols="12" md="4">
            <b-card
                img-src="https://picsum.photos/600/300/?image=25"
                img-top
            >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <b-button variant="info" href="/">Button</b-button>
            </b-card>
        </b-col>
        <b-col cols="12" md="4">
            <b-card
                img-src="https://picsum.photos/600/300/?image=25"
                img-top
            >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <b-button variant="info" href="/">Button</b-button>
            </b-card>
        </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
    name: 'Cards'
}
</script>
  • Agregamos la ruta en src/router/index.js:
,
  {
    path: '/cards',
    name: 'cards',
    component: () => import(/* webpackChunkName: "cards" */ '../views/Cards.vue')
  }
  • Incorporamos la vista en src/App.vue para que aparezca en el menú:
          <b-navbar-nav>
            <b-nav-item :to="{ name: 'Home' }" exact>Home</b-nav-item>
            <b-nav-item :to="{ name: 'About' }">About</b-nav-item>
            <b-nav-item :to="{ name: 'servicios' }">Servicios</b-nav-item>
            <b-nav-item :to="{ name: 'grid' }">Grid</b-nav-item>
            <b-nav-item :to="{ name: 'cards' }">Cards</b-nav-item>
          </b-navbar-nav>

#25 Formulario INPUT con Bootstrap 4 + Vue | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Crear una nueva vista src/views/Form.vue:
<template>
    <div class="mt-5">
        <h1>Formularios</h1>
        <form>
            <b-row>
                <b-col md="6">
                    <b-form-input type="text" v-model="texto" :state="comprobar"></b-form-input>
                    <small>Mínimo 3 carácteres</small>
                </b-col>
            </b-row>
        </form>
        <p>texto: {{texto}}</p>
    </div>
</template>

<script>
export default {
    name: 'Form',
    data(){
        return{
            texto: ''
        }
    },
    computed:{
        comprobar(){
            return this.texto.length > 2 ? true : false
        }
    }
}
</script>
  • Agregar ruta en src/router/index.js y un NavBar en src/App.vue.

#26 Formulario Select y Radio Buttons con Bootstrap 4 + Vue | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Form.vue:
<template>
    <div class="mt-5">
        <h1>Formularios</h1>
        <form>
            <b-row>
                <b-col md="3">
                    <b-form-input type="text" v-model="texto" :state="comprobar"></b-form-input>
                    <small>Mínimo 3 carácteres</small>
                    <p>Texto: {{texto}}</p>
                </b-col>
                <b-col md="3">
                    <b-form-select v-model="select" :options="animales"></b-form-select>
                    <p>Selección: {{select}}</p>
                </b-col>
                <b-col>
                    <b-form-radio-group v-model="radio" :options="animalesRadio"></b-form-radio-group>
                    <p>Radio: {{radio}}</p>
                </b-col>
                <b-col>
                    <b-form-checkbox-group v-model="check" :options="animalesRadio"></b-form-checkbox-group>
                    <p>Checkbox: {{check}}</p>
                </b-col>
            </b-row>
        </form>
    </div>
</template>

<script>
export default {
    name: 'Form',
    data(){
        return{
            texto: '',
            select: null,
            animales:[
                {value: null, text: 'Seleccione un animal'},
                {value: 'perro', text: 'Guau Guau'},
                {value: 'gato', text: 'Miau Miau'},
                {value: 'pato', text: 'Cuack Cuack'}
            ],
            radio: null,  
            animalesRadio:[
                {value: 'perro', text: 'Guau Guau'},
                {value: 'gato', text: 'Miau Miau'},
                {value: 'pato', text: 'Cuack Cuack'}
            ],
            check: []
        }
    },
    computed:{
        comprobar(){
            return this.texto.length > 2 ? true : false
        }
    }
}
</script>

Comentarios

  1. Pedro Bazó29 de julio de 2020, 6:23 p.m.

    Recordemos que para correr un servidor de proyectos vue ui, escribimos en la terminal: $ npm run serve.

    ResponderBorrar
  2. Pedro Bazó29 de julio de 2020, 6:24 p.m.

    Y luego accedemos con la url: http://localhost:8080/.

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Algunas páginas de cursos online recopiladas por Soluciones++

Imagen
Principales páginas de cursos online: Linkedin Learning Excelente página, muchos cursos son gratuitos, y todos con certificados, y de paso quedan de una vez registrados en tu perfil de Linkedin. DevCode Esta página me la acaba de recomendar un amigo, se ve muy buena, algunos cursos son gratuitos y entrega certificados. Platzi Excelente plataforma de cursos, todos sus cursos son pagos, excepto unos pocos. De los gratuitos existen dos que son muy buenos, uno de Programación Básica y otros de Marca Personal, ambos son muy, pero muy buenos. Códigofacilito En esta página tiene muchos cursos gratuitos, pero pocos con certificados. Los cursos que he visto tienen un enfoque práctico y están muy bien explicados. Microsoft No he tenido la oportunidad aún de explorar detenidamente la calidad de los cursos que ofrecen, pero según las críticas que he podido leer, muchos son muy buenos, gratuitos y entregan certificad...
Leer más

Ruta hacia el desarrollador web full stack en Soluciones++

Imagen
Curso de Marca Personal de Platzi Lo primero, pero lo primero es realizar el curso de Marca Personal de Platzi, que si bien no te enseñará a programar, te dará intrucciones claras de la orientación que deben tomar tus proyectos y tus estudios, para ir construllendo desde el inicio un cv impecable. El curso es completamente gratuito y entrega certificado. Ir a curso de Marca Personal Abrir una cuenta en GitHub Es necesario abrir primero que nada una cuenta en GitHub para poder ir creando repositorio de los proyectos que realices a lo largo de este grato y largo camino hacia nuestra conversión en desarrollador web full stack. Ir a GitHub Curso de GitHub Para poder crear respositorios, .... Ir a Curso de GitHub
Leer más