Cómo instalar Vue 3 con TypeScript y Vite.js: Guía paso a paso

21/02/2023
Instalación de vue 3 con vite js
522
Views

Vue.js es uno de los frameworks de JavaScript más populares que se utiliza para construir aplicaciones web dinámicas y escalables. Con el lanzamiento de Vue 3, esta herramienta se ha vuelto aún más poderosa, gracias a su enfoque en la usabilidad y la flexibilidad. En esta guía, te mostraré cómo instalar Vue 3 con TypeScript y Vite.js, para que puedas empezar a construir aplicaciones de forma rápida y eficiente.

¿Qué es Vue 3?

Vue 3 es la última versión del framework de JavaScript de código abierto Vue.js, que se utiliza para construir interfaces de usuario. Al igual que las versiones anteriores de Vue.js, Vue 3 es fácil de aprender y de usar, pero a diferencia de las anteriores, presenta muchas mejoras y características nuevas que mejoran su rendimiento y usabilidad. Entre las principales mejoras de Vue 3 se encuentran:

  • Mejora de la escalabilidad y el rendimiento
  • Mayor flexibilidad en la configuración y la personalización
  • Nuevas características como el sistema de slots mejorado y la compatibilidad con TypeScript

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de código abierto que se utiliza para construir aplicaciones web escalables. Es una extensión de JavaScript que agrega características adicionales como tipos estáticos, interfaces y clases, lo que facilita la escritura de código más seguro y más fácil de mantener. TypeScript se integra fácilmente con Vue.js y permite a los desarrolladores escribir código más legible y fácil de entender.

¿Qué es Vite.js?

Vite.js es un nuevo generador de proyectos de JavaScript que se utiliza para crear aplicaciones web de una manera rápida y sencilla. Se enfoca en la velocidad de desarrollo y la flexibilidad, lo que lo hace ideal para proyectos de gran escala. Vite.js es compatible con Vue.js y TypeScript, lo que lo convierte en una herramienta valiosa para la construcción de aplicaciones web modernas.

Instalación de Vue 3 con TypeScript y Vite.js

Para instalar Vue 3 con TypeScript y Vite.js, sigue los siguientes pasos:

1. Instala Node.js

Antes de instalar Vue 3, es necesario asegurarse de que tengas instalado Node.js en tu computadora. Si aún no tienes Node.js instalado, puedes seguir los pasos detallados en el siguiente artículo Instalación de Node.js Paso a Paso para descargar e instalar la última versión.

Recuerda que Vue 3 requiere Node.js versión 8.9 o superior, por lo que asegúrate de tener una versión compatible antes de continuar con la instalación de Vue 3.

2. Crea un nuevo proyecto de Vue 3

Para crear un nuevo proyecto de Vue 3 con TypeScript, abre una terminal y escribe el siguiente comando:

# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+:
npm create vite@latest my-vue-app -- --template vue-ts

Este comando creará una nueva carpeta llamada my-vue-app en el directorio actual y descargará todas las dependencias necesarias para el proyecto.

3. Instala todos los paquetes para necesarios para ejecutar la aplicación.

Una vez que se haya creado el proyecto, navega a la carpeta my-vue-app y ejecuta el siguiente comando:

npm i

4. Inicia el servidor de desarrollo

Una vez que se haya creado el proyecto, navega a la carpeta my-vue-app y ejecuta el siguiente comando para iniciar el servidor de desarrollo:

npm run dev

Esto iniciará el servidor de desarrollo de Vite.js.

Terminal con comando para ejecutar servidor de desarrollo de una aplicación con vue 3 y vite.js

Como puedes observar se levanta un servidor de desarrollo con la dirección http://localhost:5173 por defecto, en donde se estará mostrando nuestra aplicación, puedes ir a tu navegador favorito, copiar y pegar la dirección dada por vite.js y veraz la aplicación en desarrollo, o simplemente crtl+click sobre el link en mostrado en la terminal y se abrirá automáticamente una ventana del navegador con la aplicación, de momento se mostrara la página inicial de la instalación de Vue 3 con vite.js

Pantalla inicial de como instalar vue3 con vite.js

Conclusiones

Instalar Vue 3 con TypeScript y Vite.js puede parecer un proceso complejo al principio, pero siguiendo los pasos de esta guía, podrás hacerlo de una manera sencilla y eficiente. Una vez que hayas instalado Vue 3, podrás disfrutar de todas sus características nuevas y mejoradas, así como también de la facilidad y flexibilidad de TypeScript y Vite.js.

Recuerda que siempre es importante visitar las páginas oficiales de Vue y Vite.js para estar al tanto de las últimas actualizaciones y novedades. Recuerda que este es solo el primer paso en la construcción de una aplicación con Vue 3.

En próximas publicaciones, te mostraré cómo utilizar Vue 3 para construir una aplicación de quiniela para la Fórmula 1, y cómo integrar con TypeScript y Vite.js para hacerla aún mejor. ¡Estén atentos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

El tamaño máximo de subida de archivos: 2 MB. Puedes subir: imagen, texto. Los enlaces a YouTube, Facebook, Twitter y otros servicios insertados en el texto del comentario se incrustarán automáticamente. Suelta el archivo aquí