En esta página:
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:
- Que es Vue JS, Historia y otros detalles
- 5 Extensiones que te harán más Productivo(a) con Vue JS
- 6 Buenas Prácticas para Desarrolladores Vue JS
- Puedes ver más en la categoría Vue JS.
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install -g @vue/cli added 852 packages, and audited 853 packages in 1m 64 packages are looking for funding run `npm fund` for details 4 vulnerabilities (2 moderate, 2 high) |
Es importante verificar si se instalo correctamente Vue CLI, para ello ejecutamos el siguiente comando:
|
1 2 3 4 5 6 |
# Comando para ver la versión de Vue CLI que tenemos instalado $ vue --version @vue/cli 5.0.8 |
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. ):
|
1 2 3 4 5 6 7 8 9 |
npm init vue@latest npm WARN exec The following package was not found and will be installed: create-vue@latest Vue.js - The Progressive JavaScript Framework ? Project name: » vue-project |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
npm init vue@latest Vue.js - The Progressive JavaScript Framework ? Project name: » vue-project proyecto-vuejs-3 √ Project name: ... proyecto-vuejs-3 ? Add TypeScript? » No / Yes Yes √ Add TypeScript? ... No / Yes ? Add JSX Support? » No / Yes Yes √ Add JSX Support? ... No / Yes ? Add Vue Router for Single Page Application development? » No / Yes Yes √ Add Vue Router for Single Page Application development? ... No / Yes ? Add Pinia for state management? » No / Yes Yes √ Add Pinia for state management? ... No / Yes ? Add Vitest for Unit Testing? » No / Yes Yes √ Add Vitest for Unit Testing? ... No / Yes ? Add Cypress for End-to-End testing? » No / Yes Yes √ Add Cypress for End-to-End testing? ... No / Yes ? Add ESLint for code quality? » No / Yes Yes √ Add ESLint for code quality? ... No / Yes ? Add Prettier for code formatting? » No / Yes Yes √ Add Prettier for code formatting? ... No / Yes Scaffolding project in E:\xampp\htdocs\xampp\nc\tutoriales\blog\proyecto-vuejs-3... Done. Now run: cd proyecto-vuejs-3 npm install npm run lint npm run dev |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/e/xampp/htdocs/xampp/nc/tutoriales/blog/ cd proyecto-vuejs-3 /e/xampp/htdocs/xampp/nc/tutoriales/blog/proyecto-vuejs-3 npm install added 563 packages, and audited 564 packages in 3m 109 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
Ahora ejecutamops el comando npm run lint para decirle a ESLint que capture ciertas extensiones de archivos del proyecto:
|
1 2 3 4 5 6 |
npm run lint > proyecto-vuejs-3@0.0.0 lint > eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
npm run dev > proyecto-vuejs-3@0.0.0 dev > vite VITE v3.0.7 ready in 1291 ms ➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose |
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.