Reduciendo el tamaño del CSS en un 90% con PurifyCSS, webpack y vue-loader

Una de las desventajas de utilizar Bootstrap es que nuestro CSS se hace muy pesado (117Kb en su versión comprimida), así que en esta lección bonus del curso de Vue 2, vamos a utilizar la versión para webpack del plugin PurifyCSS para “purificar” el CSS eliminando así todos los selectores de Bootstrap que no se están...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Extraer CSS con webpack y vue-loader

Actualmente todo el CSS agregado en los componentes de Vue está siendo alojado en el archivo build.js y luego cargado en línea en el encabezado del HTML utilizando etiquetas <style>. En esta lección voy a utilizar un plugin de webpack para extraer todo el CSS definido en los componentes de Vue (incluyendo el código importado de...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Instalación y uso de Bootstrap Sass con npm, webpack y vue-loader

A lo largo de este curso hemos utilizado un CDN para incluir Bootstrap en nuestra aplicación. En la lección de hoy aprenderemos como instalar Bootstrap (en su versión de Sass) a través de npm e incluirlo en el componente principal de nuestro proyecto. Además veremos unos tips adicionales para la organización y reutilización del código SCSS....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Uso de Sass en los componentes de Vue.js

En está lección aprenderemos cómo utilizar el pre-procesador de CSS, Sass, dentro de nuestros componentes y aprovecharemos para refactorizar el código CSS de nuestros componentes para hacer uso de las ventajas que nos ofrece Sass....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Modularizar los estilos de los componentes de Vue con scoped y CSS modules

En esta lección aprenderemos cómo usar Scopes y CSS Modules para hacer que nuestro CSS sea verdaderamente modular y de esta forma evitar que los estilos de un componente afecten o cambien los estilos de otro componente....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Cómo separar un módulo de Vue en componentes con webpack y vue-loader

Puesto que dicen que “la práctica hace al maestro”, en esta lección vamos a practicar lo aprendido hasta ahora, creando dos nuevos componentes: primero vamos a crear un componente para representar al listado de tareas (al cual llamaremos TaskList.vue) y luego crearemos otro componente que agrupará la lógica y la plantilla para crear nuevas tareas...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Uso de ES6 en Vue con webpack y Babel

Una de las ventajas de este nuevo flujo de trabajo con webpack, es que ahora tenemos a nuestra disposición poderosos pre-procesadores como vue-loader que nos permite agrupar el código de nuestros componentes en archivos .vue entre muchas otras ventajas. Una de estas ventajas, que veremos en esta lección, es la eliminación de las restricciones del navegador impuestas cuando...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Componentes de un solo archivo en Vue 2 con webpack y vue-loader

En esta lección aprenderemos cómo podemos separar nuestros componentes en diferentes archivos que permitan a cada componente agrupar sus plantillas y código de JavaScript en un mismo lugar. Estos archivos que tendrán la extensión .vue, se llaman “Single File Components” y podremos utilizarlos por supuesto gracias a webpack y vue-loader los cuales instalamos en la lección pasada haciendo uso […]

Ver post

Introducción a vue-cli y webpack

En esta quinta parte del Curso de Vue.js 2, vamos aprender cómo es el flujo de desarrollo profesional con Vue. Para ello vamos a instalar y usar, npm (manejador de paquetes para Node), vue-cli (el cliente de Vue para crear proyectos),  webpack, vue-loader, Babel y más. Si suena complicado, no te preocupes, puesto que Vue.js con la […]

Ver post

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.