Vue.js course

Ver Otros Cursos

Instalación

Teniendo una Idea de que es Vuejs, ahora ha llegado el momento de empezar a Instalarlo. Entonces ¿Que opciones tenemos?.

Para instalar Vuejs, podemos hacerlo usando:

  • CDN (Conten delivery Network). Una CDN es una dirección de Internet que podemos llamar desde a una etiqueta <script> de HTML y empezar a utilizar Vue. Esta es la forma más simple de instalarlo. Además de que puedes encontrar una similitude cuando utilizar Jquery, Bootstrap, entre otras bibliotecas. 
  • Vue CLI. Este es un generador de proyectos de Vue, este es el enfoque más utlizado y el que vamos a usar nosotros tambien. La razón, es que Vuejs no solo es la biblioteca. En un proyecto real se necesita muchas más herramientas, como servidores, Linters, Pre-procesadores de CSS y mucho más. Obviamente configurar estas herramientas lleva tiempo, así que lo que nos ofrece vue es este generador de proyectos que funciona a traves de la consola, que nos da un proyecto con todo configurado, simplemente para que nosotros empecemos a crear nuestra aplicación y nos olvidemos de como funciona el entorno de desarrollo. Aunque cabe aclarar que el Investigar que son estas herramientas luego, no te haría nada mal. 
  • Vue UI. Este es una herramienta grafica (GUI) que funciona en el navegador y te permite crear un proyecto con botones. Tambien puede servirte luego, si quieres tener algo más visual, pero con Vue-CLI podemos hacer todas las operaciones tambien, así que es una opcion más al CLI. 
  • npm e instalando nuestras dependencias. Esta es la forma más complicada de instalar Vue. Como te mencione antes Vue para funcionar se conforma de otras herramientas como Babel, Webpack, Nodejs, y muchas más. Bueno, si quieres configurar Vue de esta forma, es necesario que sepas que son estas herramientas, es por eso que este enfoque no es el más facil. Pero puedes llegar a hacerlo una vez investigues y aprendas como utilizarlas. De hecho, para hacerte un comentario, esta es la forma en la que esta creado este sitio web. Sí, asi es. Yo uso Vuejs en este sitio web.

Ok, Entonces ya tienes una idea de las posiblidades vamos a instalar todo lo que necesitamos para empezar.

¿Qué necesitamos?

Para ser desarrolladores de Vue, vamos a instalar las siguientes herramientas:

  • Nodejs, para instalar nodejs, visita su sitio oficial nodejs.org, y descarga el instalador adecuado para tu sistema.
  • Visual Studio Code. Este será nuestro editor de código en este curso, aunque si quieres utilizar otro, no habra ningun problema. Adicionalmente puedes instalar algun plugin dentro de este editor para Vue. El más utilizado es Vetur.
  • Google Chrome o Firefox. Es obvio que necesitaremos un navegador, en mi caso voy a usar Google Chrome, pero si usas Firefox tambien puedes hacerlo. En cuanto a otros navegadores, no los recomiendo para desarrollar este curso, debido a que en algun momento vamos a utilizar un plugin de estos navegadores para Vuejs llamado Vue dev tools que tan solo esta disponible en estos navegodores.

Una vez Instalado Nodejs.Para comprobar su instalación, puedes ejecutar el siguiente comando:

$ node --version
$ npm --version

Si obtienes una respuesta, quiere decir que tienes instalado Nodejs, así que ya podemos instalar Vue. empcemos creando un proyecto con Vue CLI

Vue CLI

Cuando hablamos de Vue CLI, estamos hablando de un commando de consola que nos permite crear un proyecto. Para hacerlo escribe lo siguiente en tu terminal:

$ npm i -g @vue/cli

Esto tan solo instalara la herramienta que te permitirá crear proyectos. Para crear un nuevo proyecto, ejecuta lo siguiente:

$ vue create hello-world

Cuando ejecutes este comando te dara unas opciones, acerca del tipo de proyecto a generar. Tan solo escoge la configuración por decto "default". Esto creará una nueva carpeta con todas las herramientas listas. Simplemente para que empecemos a editarlas.

Una vez creado la carpeta puedes ejecutar los siguentes comandos para iniciar el servidor de desarrollo de Vuejs.

 $ cd hello-world
 $ npm run serve

Esto ejecutara un servidor web, en la dirección http://localhost:8080. Lo que significa que tu proyecto ya esta listo.

Vue UI

para crear un proyecto usando Vue UI, puedes hacerlo usando el siguient comando:

$ vue ui

Esto abrira una ventana de tu navegador. con una interfaz grafica que te permitirá crear un proyecto nuevo.

Vue CLI

A partir de aqui tan solo es darle información a esta interfaz para que cree un proyecto nuevo. y al final generará exactamente lo mismo que Vue CLI.

Felicidades, ya tienes un proyecto de Vuejs creado

Vuejs, es un Framework progresivo de Javascript, para crear aplicaciones single page applications con todo lo que ya sabes del desarrollo web frontend, html, css, javascript.

vistas