Vue3+vite创建项目架构文件说明总结

Vue 3 项目由多个文件和文件夹组成，每个部分都有其特定的作用。Vue 3 项目由核心文件包括 index.html、main.js 和 App.vue。Vue 组件是应用的基本构建块，使用单文件组件（.vue 文件）定义。Vue Router 用于管理路由，Vuex 用于状态管理。

项目结构

一个 Vue 3 项目通常包含以下文件和文件夹：

复制代码

my-vue-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── assets/         # 静态资源（如图片、字体等）
│   ├── components/     # 可复用的 Vue 组件
│   ├── views/          # 页面级组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 项目入口文件
│   ├── router.js       # 路由配置
│   ├── store.js        # Vuex 状态管理配置
│   └── ...             # 其他配置和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

核心文件解析

1、public/index.html

public/index.html 是 Vue 应用的 HTML 模板文件。

index.html提供一个基础的 HTML 页面骨架，浏览器加载时，先渲染这个页面，Vue 应用会把内容"挂载"到index.html中的关键位置<div id="app"></div>中。

你可以在这里写通用的 <meta>、字体、图标、全局样式 <link>、第三方脚本等。但一般不在这里写业务内容，业务内容都交给 Vue 组件处理。

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

2、src/main.js

src/main.js 是 Vue 应用的入口文件。

src/main.js 负责创建 Vue 应用实例，并将根组件（通常是 App.vue）挂载到 index.html 中的 div#app 中。

TypeScript 复制代码

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

createApp(App)：创建一个 Vue 应用实例，并把 App.vue 作为根组件。

.mount('#app')：告诉 Vue 把这个应用插入到页面上 id="app" 的元素内。

3、src/App.vue

src/App.vue 是 Vue 应用的根组件。

src/App.vue 通常包含应用的主要布局和路由视图。

html 复制代码

<template>
  <div id="app">
    <h1>Hello, Vue 3!</h1>
    <router-view></router-view> <!-- 路由视图 -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

4、src/router.js

src/router.js 是 Vue Router 的配置文件，用于定义路由。

5、src/store.js

src/store.js 是 Vuex 状态管理的配置文件（如果使用 Vuex）。

6、package.json

package.json 是项目的配置文件，包含项目的元数据、依赖和脚本。

TypeScript 复制代码

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve", // 启动开发服务器
    "build": "vue-cli-service build", // 构建生产环境代码
    "lint": "vue-cli-service lint"    // 代码格式化
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  }
}

7、src/components/

src/components/ 文件夹包含可复用的 Vue 组件。

8、src/views/

src/views/ 文件夹包含页面级组件，通常与路由配置一起使用。

9、node_modules

存放项目依赖的文件夹。

10、public

存放静态资源的文件夹，例如图片、字体等。

11、src

存放项目源代码的文件夹。

Vue 组件的基本结构

Vue 组件是 Vue 应用的核心构建块。

一个vue件通常包含以下部分：<template>、<script> 和 <style>。

模板（`<template>`）

使用 HTML 和 Vue 模板语法定义组件的 UI。支持插值（{``{ }}）、指令（如 v-if、v-for）和事件绑定（如 @click）。

脚本（`<script>`）

定义组件的逻辑，包括数据、方法、生命周期钩子等。使用 export default 导出组件选项。

样式（`<style>`）

定义组件的样式。使用 scoped 属性可以将样式限制在当前组件内。

Vite 启动流程

执行 npm run dev 命令后，npm 会查找本地 node_modules/.bin/vite 可执行文件，调用这个文件，启动开发服务器。

Vite 的启动过程核心步骤：

1、读取配置

默认读取根目录下的 vite.config.js 或 vite.config.ts。配置包括 root、alias、插件、端口等。

2、解析依赖

扫描 src/main.js（或 src/main.ts）作为入口文件；对 ES 模块进行依赖分析；对导入路径（如 @/components/Hello.vue）进行别名解析。

3、启动开发服务器

创建一个 HTTP 服务器，默认端口 5173。

提供热更新（HMR, Hot Module Replacement）能力。

将 Vue 文件、JS/TS、CSS 等通过内置的 Vite 插件转换成浏览器可识别的代码。

文件调用顺序（以典型 Vue3 项目为例）