Categoría: Vue.js

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

Duilio Palacios 25/05/2017
JavaScript, Videotutorial, Vue.js 1 Comentario

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 utilizando. Con esto lograremos reducir el tamaño del CSS de 117Kb a tan solo 12Kb (aproximadamente un 90%).

Extraer CSS con webpack y vue-loader

Duilio Palacios 25/05/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en 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 Bootstrap) a un archivo aparte (style.css).

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

Duilio Palacios 25/05/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en 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.

Uso de Sass en los componentes de Vue.js

Duilio Palacios 17/05/2017
JavaScript, Videotutorial, Vue.js 2 Comentarios

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.

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

Duilio Palacios 17/05/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en 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.

Agregando estilos con CSS en los componentes de Vue

Duilio Palacios 17/05/2017
JavaScript, Videotutorial, Vue.js 0 comentarios

En está lección vamos a mover el código CSS a los componentes de Vue, con el objetivo de que nuestros estilos sean modulares. Además de ello, también vamos a refactorizar nuestro CSS y lo separaremos en sus respectivos componentes dentro de los archivos .vue.

Ver post

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

Duilio Palacios 09/05/2017
JavaScript, Videotutorial, Vue.js 1 Comentario

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 (y a este lo llamaremos TaskForm.vue). Así que en la lección de hoy podrás ver más ejemplos de cómo separar tu código usando componentes de un solo archivo (Single File Components), más uso de ES6 con Vue.js y todo esto de nuevo por supuesto de nuevo con la ayuda de webpack y vue-loader.

Uso de ES6 en Vue con webpack y Babel

Duilio Palacios 08/05/2017
JavaScript, Videotutorial, Vue.js 1 Comentario

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 colocamos nuestras plantillas en el HTML final. Puesto que ahora las plantillas de Vue van a ser pre-procesadas y no leídas por el navegador no es necesario que mantengamos restricciones como por ejemplo definir sólo elementos <li> dentro de un elemento <ul>.

Con este nuevo flujo de desarrollo con Vue y webpack, obtenemos otra ventaja y es el uso de babel-loader. Babel nos va a permitir utilizar la sintaxis más moderna de JavaScript (ES6) sin tener que preocuparnos si ésta va a poder ser interpretada o no por el resto de los navegadores, puesto que este código se va a transpilar a una versión de JS que los navegadores modernos puedan interpretar. Así que en esta lección vamos a sacar provecho de esto y a refactorizar nuestro código para que quede aún más limpio:

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

Duilio Palacios 05/05/2017
JavaScript, Videotutorial, Vue.js 0 comentarios

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 de vue-cli. En esta lección también haremos uso de Hot Module Replacement (HMR) que nos permitirá hacer cambios en el código y poder verlos reflejados automáticamente en el navegador, sin necesidad de recargar la página.

Ver post

Introducción a vue-cli y webpack

Duilio Palacios 04/05/2017
JavaScript, Videotutorial, Vue.js 1 Comentario

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 ayuda de su cliente vue-cli lo hace muy sencillo. Además a partir de la siguiente lección, vamos a explicar todo el proceso paso por paso:

Ver post