当前位置：首页 > article >正文

Vue 3 项目结构及核心文件

article 2025/1/26 21:51:05

Vue 3 是一个流行的前端框架，它提供了一种高效、灵活的方式来构建用户界面。在这篇博客中，我们将深入探讨一个标准 Vue 3 项目的目录结构，并详细介绍 main.ts 和 App.vue 这两个核心文件。

目录结构

首先，让我们来看一下一个典型的 Vue 3 项目的目录结构。以下是一个标准的 Vue 3 项目结构示例：

hello_vue3/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   └── App.vue
│   └── main.ts
├── .gitignore
├── env.d.ts
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

目录说明

node_modules/：存放项目的依赖包，由 npm 或 yarn 安装。
public/：存放静态资源文件，如 index.html。
src/：存放项目的源代码，通常包含 components、assets、store 等。
- components/：存放 Vue 组件。
- App.vue：根组件。
- main.ts：项目的入口文件，负责挂载 Vue 应用。
.gitignore：Git 忽略的文件和文件夹配置。
env.d.ts：TypeScript 环境声明文件。
index.html：项目的入口 HTML 文件。
package.json：项目配置文件，包含项目的元数据和依赖信息。
package-lock.json：锁定项目依赖的版本。
README.md：项目说明文件，通常包括项目介绍和开发说明。
tsconfig.app.json：TypeScript 配置文件，针对应用的配置。
tsconfig.json：TypeScript 的根配置文件。
tsconfig.node.json：Node.js 环境的 TypeScript 配置文件。
vite.config.ts：Vite 配置文件，Vite 是一个现代前端构建工具，用于构建 Vue 应用。

核心文件介绍

`main.ts`

main.ts 是 Vue 3 项目的入口文件。它的主要功能是创建 Vue 应用实例，并将其挂载到页面中的 DOM 元素。以下是一个典型的 main.ts 文件示例：

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

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

代码解释

导入 Vue 应用创建函数：
```
import { createApp } from 'vue';
```
这一行代码从 vue 包中导入了 createApp 函数，createApp 是用于创建 Vue 应用实例的函数。
导入根组件：
```
import App from './App.vue';
```
这行代码导入了根组件 App.vue，这是应用的主组件。
创建并挂载 Vue 应用：
```
createApp(App).mount('#app');
```
这行代码创建了一个 Vue 应用实例，并将其挂载到 HTML 中的 #app 元素上。这是 Vue 应用的启动过程。

`App.vue`

App.vue 是 Vue 3 项目的根组件，它定义了应用的基础结构和样式。下面是一个典型的 App.vue 文件示例：

<template>
  <Person />
</template>

<script lang="ts">
import Person from "./components/Person.vue";

export default {
  name: "App",
  components: { Person } // 注册组件
};
</script>

<style>
</style>

代码解释

模板部分：
```
<template>
  <Person />
</template>
```
这里定义了组件的模板结构。在这个例子中，模板中包含了一个 Person 组件。模板负责定义页面的结构和布局。
脚本部分：
```
<script lang="ts">
import Person from "./components/Person.vue";

export default {
  name: "App",
  components: { Person } // 注册组件
};
</script>
```
- 在脚本部分，首先我们导入了 Person 组件。
- 使用 export default 定义了组件的选项对象，其中 name 字段定义了组件的名称，components 字段用于注册 Person 组件，使得它可以在模板中使用。
样式部分：
```
<style>
</style>
```
样式部分是组件的局部样式，在这里你可以编写与组件相关的 CSS 样式。在这个例子中样式部分为空，但你可以根据需求添加。