Como Crear una Aplicación con Vue JS 3

5 minuto(s)

La versión de Vue JS 2 fue una de las versiones que llamo la atención de la comunidad de desarrolladores, logrando una popularidad importante. Vue JS 2 actualmente es usado en muchos proyectos y empresas de renombre como Nintendo, Adobe, Apple y otras más que puedes ver en nuestro Flyer: Algunas Empresas o Proyectos que Usan Vue JS ! . Vue JS 3 trae mejoras de rendimiento, Composition API, Teleport, mejoras en Fragments, Multiple v-models, entre otras características que hacen que sea mejor que su versión anterior. En este Post te enseñare a Como Crear una Aplicación con Vue JS 3, vamos con ello.

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación” y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear una Aplicación con Vue JS 3. 

Primeros Pasos

Para poder trabajar con Vue JS, necesitará tener instalado Node JS, si no lo tienes intalado y no sabes como hacerlo, puedes leer el artículo Que es y Como instalar Node JS:

Algunos paso para instalar pueden cambiar, pero en general instalalo como si instalaras cualquier programa.

Instalación de Vue CLI

Paso seguido debemos instalar Vue CLI, esta herramienta nos permite ejecutar comandos para  trabajar de manera optima con Vue JS. Para instalar Vue CLI, ejecutamos el siguiente comando:


Es importante verificar si se instalo correctamente Vue CLI, para ello ejecutamos el siguiente comando:


Hasta la fecha de este Post, la última versión de Vue CLI es la 5.0.8

Bien, hasta aquí ya tenemos todo lo necesario para crear nuestro proyecto con Vue JS 3.

Creación de Proyecto con Vue JS 3

Para crear el proyecto con Vue ejecutamos el siguiente comando (El comando instalará y ejecutará create-vue, la herramienta oficial de tipo scaffolding de Vue JS. ):


Nos pedirá que respondamos si queremos usar ciertas utilidades en nuestro proyecto. Yo le puse a todas Yes ya que son herramientas que me serán de utilidad. Te recomiendo hacer también lo mismo, ya que no va afectar tu proyecto y puedes quitar alguna de ellas más adelante.


Y automáticamente al terminar nos crear un directorio con el nombre del proyecto, en mi caso se llama proyecto-vuejs-3, luego nos avisa que debemos ejecutar los comandos cd proyecto-vuejs-3, npm install, npm run lint y npm run dev para terminar la creación del proyecto.

Entonces primero ingresamos al directorio del proyecto ejecutando el comando cd proyecto-vuejs-3 (Windows) y dentro del directorio ejecutamos el comando npm install para instalar las dependencias necesarias para que el proyecto funcione correctamente: 


Ahora ejecutamops el comando npm run lint para decirle a ESLint que capture ciertas extensiones de archivos del proyecto:


ESLint es un proyecto de código abierto que te ayuda a encontrar y solucionar problemas con tu código JavaScript y este lo integramos en nuestro proyecto, cuando ejecutamos anteriormente el comando npm init vue@latest

Por último ejecutamos el comando npm run dev para iniciar el servidor de desarrollo de Vue JS:


Si vamos al navegador y abrilos la ruta http://localhost:5173/ o http://127.0.0.1:5173/ podemos ver que se ha creado nuestro proyecto con Vue JS 3 sin problemas:

Asi de sencillo podemos crear un proyecto con Vue 3.

Conclusión

La forma de crear un proyecto en Vue JS 3 no es complicada. Talvés tengas problemas en algun momento al crear un proyecto y talvés se deba a ciertas librerías o versiones de ellas, que generan algunos conflictos con Vue 3, pero todo es solucionable.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.