Vite.js 應用程序中“main.js”文件的用途是什么？

Question

我正在構建一個 Vite.js 應用程序，但不確定我是否理解main.js文件的用途。 我很難在vite docs中找到對此的明確解釋。 我發現了一篇關於 Vue 應用程序的 S/O 帖子，其中包含類似的問題，但不確定答案是否也適用於 Vite。

我是使用這些前端構建工具以及一般模塊的新手，並希望確保我了解正在發生的事情。 我知道index.html在開發過程中作為應用程序的入口點，但是main.js的目的到底是什么？

我的文件結構如下：

├── package.json
├── vite.config.js
├── index.html
├── main.js
├── styles.css
├── pages
│   ├── login
│   │   ├── login.html
│   │   ├── login.js
│   ├── home
│   │   ├── home.html 
│   │   ├── home.js
│   │

Answer 1

在main.js ，您創建應用程序實例，對其進行配置，然后將其掛載到div標簽。 這是任何vue3應用程序的前進方向，並且獨立於使用的捆綁工具（例如vite ）。 main.js的典型示例如下：

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');

在index.html ，您將加載此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>

Vite.js 應用程序中“main.js”文件的用途是什么？

問題描述

1 個解決方案

解決方案1
-1 2021-12-20 21:02:04

Vite.js 應用程序中“main.js”文件的用途是什么？

問題描述

1 個解決方案

解決方案1 -1 2021-12-20 21:02:04

解決方案1
-1 2021-12-20 21:02:04