{class="mx-auto", width="200"}

Vue 3

Para desarrollar componentes usamos la última versión disponible de Vue, que en este caso es la v3.

La documentación oficial de referencia: https://vuejs.org/

Vite

No utilizamos Webpack en nuestros proyectos, sino un nuevo programa desarrollado por el autor de Vue denominado Vite.

Funciona cargando directamente los ficheros Javascript que usamos en el navegador, sin compilar y sin pasos intermedios. Chrome y los navegadores modernos son capaces de interpretar el código tal cual y eso proporciona una recarga inmediata. Normalmente tardaremos más en cambiar del editor al navegador que lo que tarda en recargar la página con los cambios.

Además proporciona la recarga en caliente, donde si cambiamos alguna clase CSS por ejemplo se queda tal cual pero aplica la nueva clase sin recargar nada. Algunas veces puntuales es posible que falle y haya que recurrir a F5 para una recarga manual, pero en general suele funcionar.

Cuando vamos a producción empaqueta el proyecto en un solo fichero por rendimiento y lo minifica para nosotros.

En principio es una herramienta que no se usa directamente, sino que está preparada ya en los proyectos por debajo. De todas formas la documentación de la herramienta por referencia: https://github.com/vitejs/vite

Vetur

De cara a vscode todos tenemos la extensión Vetur (https://marketplace.visualstudio.com/items?itemName=octref.vetur) instalada en el editor para poder interactuar correctamente con la sintaxis de los ficheros *.vue.