¡Acostúmbrate a escribir juntos! Este es el noveno día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .
Rápido
Antes de presentar Vite, hagamos una revisión rápida del Módulo ES.
Módulo ES
- Todos los navegadores modernos son compatibles con ES Module (excepto IE)
- Cargue el módulo de la siguiente manera:
<script type="module" src="..."></script> - Los scripts que admiten módulos se cargan de forma diferida de forma predeterminada
- Similar al aplazamiento de la configuración de la etiqueta del script
- Se ejecuta después de analizar el documento y antes de que se active el evento DOMContentLoaded
Rápido frente a Vue-CLI
- Vite puede ejecutarse directamente sin empaquetar en el entorno de desarrollo
- Vite realizará un procesamiento especial en los archivos que el navegador no puede cargar y devolverá el resultado compilado al navegador.
- En el modo de desarrollo Vue-CLI, el módulo debe estar empaquetado para ejecutarse
- Esto también genera un problema, si el proyecto es muy grande, será muy lento (inicio)
- Vite se empaqueta con Rollup en producción
- Embalaje basado en Módulo ES
- Vue-CLI está empaquetado con Webpack
Ventajas de Vite
- arranque rápido en frío
- compilar bajo demanda
- Actualización en caliente del módulo
Uso de Vite
Vite tiene dos formas de crear proyectos
- método uno
npm init vite-app <project-name>
cd <project-name>
npm install
复制代码- Método 2 Crear un proyecto basado en una plantilla
npm init vite-app --template react
npm init vite-app --templatye preact
复制代码Proyecto de construcción basado en el método 1
- Inicializar el proyecto
2. Instalar dependencias
: después de instalar las dependencias, echemos un vistazo al archivo index.html en el proyecto.
Tenga en cuenta que la etiqueta srcipt aquí es para cargar el módulo a través del módulo.
No parece ser un problema, ejecutemos el proyecto y veamos
Como puede ver, nuestra página está funcionando correctamente, echemos un vistazo al código fuente de la página.
El archivo app.vue está cargado en main.js, pero el navegador no reconoce el archivo .vue, pero el proyecto puede ejecutarse normalmente. ¿Cómo funciona eso?
Aquí encontramos que intercepta nuestra solicitud, obtiene el archivo .vue y modifica el encabezado de respuesta para decirle al navegador que se trata de un script js