No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
6H
37M
58S
Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Soporte para Vue

18/19
Recursos

Vite es desarrollando por las mismas personas que desarrollaron Vue.js y a continuaci贸n vamos a ver lo sencillo que es integrar estas dos tecnolog铆as.

Creando un proyecto con Vue

Para crear un proyecto con Vue tendr铆amos que usar el mismo comando que antes, npm create vite@latest o yarn create vite, pero como lo podr谩s suponer, escoger铆amos la opci贸n de vue.

  • ? Project name: 禄 vite-vue
  • ? Select a framework: 禄 vue
  • ? Select a variant: 禄 vue

Con esto solo faltar铆a instalar las dependencias y todo estar铆a listo para ejecutar el proyecto. Al igual que con nuestro proyecto en React, Vite emplea un plugin en vite.config.js para poder integrar Vue.

Estructura

La estructura de archivos que nos provee Vite es bastante est谩ndar, donde primero podemos encontrar el package.json que tiene instalado vue y el plugin de vue como dependencias. Adem谩s, tambi茅n podemos encontrar los siguientes archivos:

Carpeta public

La carpeta public contiene un icono. Mientras el proyecto avance se guardaran archivos est谩ticos, los cuales en producci贸n estar铆an del lado del servidor.

index.html

En el index.html podemos encontrar un div con el id app, el cual referencia todo nuestro proyecto. Adem谩s, tambi茅n encontramos un script que a diferencia de React usa solamente js y no jsx.

src

En la carpeta src destacan los siguientes archivos:

  • El main.js importa la capacidad de generar proyectos con Vue.js e importa App, el primer componente de nuestro proyecto.

  • En App.vue podemos encontrar una secci贸n de c贸digo en js, la secci贸n de template la cual muestra el c贸digo se va a dibujar nuestra p谩gina y la secci贸n de estilos.

  • Tenemos el componente HelloWorld.vue en la carpeta de componentes, el cual guarda el c贸digo necesario para que el contador funcione.

Conclusi贸n

Como puedes ver, la integraci贸n fue bastante f谩cil. Vue.js es un framework elegante, por lo que si te intereso te recomiendo visitar los cursos de Diana Mart铆nez y la ruta de Vue.js que Platzi tiene.

Contribuci贸n creada por: Jofay Zhan Segura

Aportes 5

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si estas usando React con Vite, tambi茅n puedes crear una carpeta public donde agregues archivos est谩ticos, aunque esta no venga incluida por defecto

Pues la verdad si me causo curiosidad Vue, pero quiero primero aprender bien React鈥 Jajaj supongo que soy muy lento de aprendizaje 馃槙

Recomiendo 100% la ruta de frontend vue y en especial los cursos de Diana. Son super directos y bien explicados. Ya la termin茅 y es incre铆ble lo que aprend铆, y eso que ya desarrollaba con vue.

La diferencia entre usar el Vue CLI y Vite es abismal, la rapidez y la efectividad sobre todo en aplicaciones grandes es impresionante.

Bueno, me encanta vite. es muy eficiente, as铆 que dejar茅 de lado el webpack a pesar que te hace lucir todo un crack con toda la configuraci贸n que le metes, pero vite es muy productivo.