项目结构介绍

1.
2├─ public
3│  └─ favicon.ico # 页签图标
4├─ src
5│  ├─ assets
6│  │  └─ ...
7│  ├─ conponents
8│  │  └─ ...
9│  ├─ App.vue
10│  └─ main.ts
11├─ .eslintrc.cjs # eslint配置文件
12├─ .gitignore # git忽略文件
13├─ .prettierrc.json # prettier配置文件
14├─ env.d.ts 
15├─ index.html # 入口文件
16├─ package-lock.json
17├─ package.json
18├─ README.md
19├─ tsconfig.app.json
20├─ tsconfig.json
21├─ tsconfig.node.json
22└─ vite.config.ts

注意

在 vite 项目中，index.html 通常是整个应用的入口文件。

vite 利用了浏览器原生ES模块导入的特性，因此可以直接在 index.html 中通过 <script type="module"> 标签引入 JavaScript模块，例如：

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <link rel="icon" href="/favicon.ico">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Hello Vue3</title>
8  </head>
9  <body>
10    <div id="app"></div>
11    <script type="module" src="/src/main.ts"></script>
12  </body>
13</html>

在这个例子中，/src/main.ts 就是项目的主要 JavaScript 文件，它被作为模块从 index.html 中导入。

项目结构介绍#

项目结构介绍