Estoy creando una aplicación Vite.js y no estoy seguro de entender el propósito del archivo main.js. Tengo dificultades para encontrar una explicación clara de esto en los documentos de vite . Encontré una publicación S/O con una pregunta similar con respecto a una aplicación Vue, pero no estoy seguro de si las respuestas también se aplican a Vite.
Soy nuevo en el trabajo con estas herramientas de compilación frontend, así como con módulos en general, y quiero asegurarme de que entiendo lo que está sucediendo. Sé que index.html sirve como punto de entrada a la aplicación durante el desarrollo, pero ¿cuál es exactamente el propósito de main.js ?
Mi estructura de archivos es la siguiente:
├── package.json ├── vite.config.js ├── index.html ├── main.js ├── styles.css ├── pages │ ├── login │ │ ├── login.html │ │ ├── login.js │ ├── home │ │ ├── home.html │ │ ├── home.js │ │En main.js , crea la instancia de la aplicación, la configura y luego la monta en una etiqueta div . Este es el camino a seguir para cualquier aplicación vue3 y es independiente de la herramienta de agrupación utilizada (como vite ). Un ejemplo típico para un main.js es el siguiente:
import {createApp} from 'vue' import store from './store.js' import router from './routes.js' import i18n from './i18n.js' import App from '../components/App.vue' // mount is the last one ... const myApp = createApp(App); myApp.use(store) .use(router) .use(i18n) .mount('#app'); En index.html , cargarías este main.js :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>MyApp</title> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <meta name="theme-color" content="#ffffff"> </head> <body> <div id="app"></div> <script type="module" src="/src/js/main.js"></script> </body> </html>