[英]What is the purpose of the 'main.js' file in a Vite.js app?
I am building a Vite.js app and am not sure I understand the purpose of the main.js file.我正在构建一个 Vite.js 应用程序,但不确定我是否理解main.js文件的用途。 I am having a hard time finding a clear explanation of this in the vite docs .
我很难在vite docs中找到对此的明确解释。 I found an S/O post with a similar question in regards to a Vue app, but am not sure if the answers apply to Vite as well.
我发现了一篇关于 Vue 应用程序的 S/O 帖子,其中包含类似的问题,但不确定答案是否也适用于 Vite。
I am new to working with these frontend build tools, as well as modules in general, and want to make sure I understand what's happening.我是使用这些前端构建工具以及一般模块的新手,并希望确保我了解正在发生的事情。 I know that index.html serves as the entry point to the app during development, but what is the purpose of main.js exactly?
我知道index.html在开发过程中作为应用程序的入口点,但是main.js的目的到底是什么?
My file structure is as follows:我的文件结构如下:
├── package.json
├── vite.config.js
├── index.html
├── main.js
├── styles.css
├── pages
│ ├── login
│ │ ├── login.html
│ │ ├── login.js
│ ├── home
│ │ ├── home.html
│ │ ├── home.js
│ │
In the main.js
you create the app instance, configure it and then mount it to a div
tag.在
main.js
,您创建应用程序实例,对其进行配置,然后将其挂载到div
标签。 This is the way forward for any vue3
application and is independent on the bundling tool used (such as vite
).这是任何
vue3
应用程序的前进方向,并且独立于使用的捆绑工具(例如vite
)。 A typical example for a main.js
is as follows: 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');
In the index.html
you would load this main.js
:在
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.