en VueJS

Curso VueJS – Creando el proyecto (Clase II)

Configuración del proyecto VueJS

Hola a todos, en esta entrada continuo con esta serie de articulos acerca de VueJS, en la cual vamos a configurar nuestro entorno de trabajo para comenzar a construir una aplicación que integra mucho de lo que se necesira para desarrollar aplicaciones reales, como lo son los componentes, consumir servicios web, puesta a producción, etc.

La aplicación que vamos a construir será un pokédex, para tal objetivo haremos uso de la pokéapiAquí pueden observar el resultado que podrá tener la aplicación.

Vista de la aplicación ya finalizada.Vista de loader.Vista de pokemonsVista individual de pokemonAhora, supongo que ya debes tener instalado Node en tu sistema, de no ser así (instalalo ahora y vuelve aquí al finalizar) y el excelente gestor de paquetes para node Yarn (no es obligatorio, puedes utilizar “npm” sin problemas, pero es mejor actualizarse :D)

Con esto ya podemos comenzar, así que “manos al teclado”.

Primero necesitamos instalar una maravilla de herramienta, como lo es Vue-loader. Si no la conocen Vue-loader es una herramienta que nos permite utilizar Webpack en nuestro flujo de trabajo, con lo cual podremos gozar de ventajas a la hora de desarrollar nuestras aplicaciones, como la recarga automatica en cada cambio para poder visualizarlos en el navegador, brindarnos un sistema de modulos para mejorar nuestro desarrollo con JS, compilar en un sólo archivo nuestras dependencias para enviar nuestra aplicación a producción, etc.

Además Vue-loader nos brinda la posibilidad de escribir nuestros componentes en archivos separados con extensión *.vue con el siguiente formato:

¿Genial no lo creen?

 

Manos al Teclado…

Entonces, lo primero que tenemos que hacer es abrir nuestra terminal, consola o simbolo del sistema y ejecutar el comando que corresponda con el gestor de paquetes que estén utilizando:


// Si estás utilizando npm

npm i -g vue-cli

// Si estás utilizando yarn

yarn global add vue-cli

 

 

Esperamos a que finalice la instalación, y en la misma consola nos posicionamos con ayuda del comando cd en el directorio que hayamos destinado para este proyecto.

Ya que estamos en este punto, ejecutamos el siguiente comando:


vue init webpack-simple pokedex

 

 

Vue es el comando que acabamos de instalar, init es la orden que queremos que ejecute, la cual creará un nuevo directorio, con el esqueleto de una aplicación sencilla de VueJS. La siguiente parte del comando anterior es “webpack-simple”, el cual es uno de los templates que vue-loader nos ofrece para iniciar nuestros proyectos, y por último, pokedex es el nombre de nuestro proyecto.

En la consola deberíamos tener una salida como la siguiente:

Vista del resultado en la consola.Siguiente las instrucciones que nos muestra la consola podemos ejecutar la aplicación que acabamos de crear. Entonces los llevamos a cabo:


// Nos posicionamos en el directorio del proyecto.

cd pokedex

// Instalamos las dependencias del proyecto, yo usaré yarn pero pueden utilizar npm sin problema.

yarn install

// Con npm

npm install

// Cuando el proceso finalice ejecutamos lo siguiente

// Con yarn

yarn run dev

// Con npm

npm run dev

Con eso debería mostrarse en nuestro navegador por defecto la aplicación que acabamos de crear.

Vista de la aplicación completa de VueJS.Bien, es todo por esta entrada, espero haber dejado claro lo básico y que les agrade la idea de la aplicación que vamos a crear, si quieren verla en funcionamiento, pueden hacerlo en el siguiente link o también pueden revisar el repositorio en Github.

Si quieren profundizar en cualquiera de las herramientas que vimos aquí, no duden en leer su respectiva documentación, o si lo prefieren dejen sus comentarios y con gusto les responderé.

Nos vemos en la siguiente entrada.

Saludos.

 

Deja un comentario