第一部分：Vue 3 基础入门

第5集：项目结构深度解析

在上一集中，我们创建了第一个Vue 3项目，并了解了基本的项目结构。在本集中，我们将深入解析Vue 3项目的各个文件和目录，了解它们的作用和配置选项，以便更好地管理和开发Vue 3应用。

5.1 项目根目录

项目根目录包含了项目的配置文件、依赖管理文件和其他重要文件：

5.1.1 index.html

作用：HTML模板文件，是Vue应用的入口HTML文件。

特点：

  • 与传统的HTML文件不同，Vite的index.html位于项目根目录，而不是public目录
  • 包含一个id为"app"的div元素，Vue应用将挂载到这个元素上
  • 使用<script type="module">引入JavaScript模块
  • 支持模板变量替换（如%VITE_APP_TITLE%）

示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>%VITE_APP_TITLE%</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

5.1.2 package.json

作用：项目配置文件，包含项目依赖、脚本命令、元数据等。

核心配置项：

  • name：项目名称
  • version：项目版本
  • type：模块类型（"module"表示ES模块）
  • scripts：脚本命令
  • dependencies：生产依赖
  • devDependencies：开发依赖

示例：

{
  "name": "my-vue3-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "vite": "^5.0.0"
  }
}

5.1.3 vite.config.js

作用：Vite配置文件，用于配置Vite的各种选项。

常用配置项：

  • plugins：插件配置
  • server：开发服务器配置
  • build：构建配置
  • resolve：模块解析配置
  • css：CSS配置

示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

5.1.4 .gitignore

作用：Git忽略文件，指定Git不追踪的文件和目录。

常用忽略项：

dist
node_modules
.env
.env.local
.env.*.local
.vscode/
.idea/
*.log

5.1.5 README.md

作用：项目说明文件，包含项目介绍、安装步骤、使用方法等。

5.2 public目录

作用：静态资源目录，存放不需要经过构建处理的静态资源。

特点：

  • 目录下的文件会被直接复制到构建输出目录的根目录
  • 可以通过绝对路径访问，如/favicon.ico
  • 适合存放如favicon、robots.txt、第三方库等静态资源

5.3 src目录

作用：源代码目录，包含应用的所有源代码。

5.3.1 main.js（或main.ts）

作用：应用入口文件，负责创建Vue应用实例并挂载到DOM上。

核心功能：

  • 导入Vue的createApp函数
  • 导入根组件App.vue
  • 导入全局样式
  • 创建Vue应用实例
  • 注册全局组件、指令、插件等
  • 将应用挂载到DOM元素上

示例：

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

const app = createApp(App)

// 注册全局组件
// app.component('MyComponent', MyComponent)

// 注册全局指令
// app.directive('my-directive', myDirective)

// 使用插件
// app.use(myPlugin)

app.mount('#app')

5.3.2 App.vue

作用：根组件，是应用的顶层组件。

结构：

  • &lt;template&gt;：组件模板
  • &lt;script setup&gt;：组件逻辑（使用组合式API）
  • &lt;style&gt;：组件样式

示例：

<template>
  <div class="app">
    <Header />
    <main>
      <router-view />
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}
</style>

5.3.3 components目录

作用：存放自定义组件。

组织方式：

  • 按功能模块组织，如components/user/、components/admin/
  • 通用组件放在components/common/或components/ui/目录
  • 每个组件通常是一个独立的.vue文件

组件命名规范：

  • 采用 PascalCase 命名（如HelloWorld.vue）
  • 文件名与组件名保持一致
  • 复杂组件可以拆分为多个子组件

5.3.4 assets目录

作用：存放静态资源，如图片、字体、图标等。

特点：

  • 目录下的资源会经过Vite的构建处理
  • 支持多种资源格式（jpg、png、svg、gif、woff2等）
  • 可以通过相对路径或别名导入

示例：

// 导入图片
import logo from './assets/logo.png'

// 在模板中使用
<img :src="logo" alt="Logo" />

5.3.5 style.css

作用：全局样式文件。

内容：

  • 重置样式（如margin、padding）
  • 全局变量（如颜色、字体）
  • 全局布局样式
  • 通用工具类

示例：

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CSS变量 */
:root {
  --primary-color: #42b883;
  --secondary-color: #35495e;
  --text-color: #333;
  --background-color: #f5f5f5;
}

/* 全局样式 */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
}

5.4 其他常用目录

根据项目需求，我们还可以添加以下目录：

5.4.1 views（或pages）目录

作用：存放页面级组件，通常与路由对应。

示例：

src/
└── views/
    ├── Home.vue
    ├── About.vue
    ├── Contact.vue
    └── User/
        ├── List.vue
        ├── Detail.vue
        └── Edit.vue

5.4.2 router目录

作用：存放路由配置文件。

示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

5.4.3 store目录

作用：存放状态管理相关文件（如Pinia或Vuex）。

示例：

src/
└── store/
    ├── index.js
    └── modules/
        ├── user.js
        └── product.js

5.4.4 api目录

作用：存放API请求相关文件。

示例：

src/
└── api/
    ├── index.js       # API客户端配置
    ├── user.js        # 用户相关API
    └── product.js     # 产品相关API

5.4.5 utils目录

作用：存放工具函数和工具类。

示例：

src/
└── utils/
    ├── request.js     # 请求工具
    ├── format.js      # 格式化工具
    └── storage.js     # 存储工具

5.4.6 composables目录

作用：存放组合式函数（composables），用于复用组件逻辑。

示例：

src/
└── composables/
    ├── useCounter.js
    ├── useApi.js
    └── useStorage.js

5.4.7 hooks目录

作用：存放自定义钩子（与composables类似，通常用于React项目，但Vue项目也可使用）。

5.5 项目结构最佳实践

  1. 按功能模块组织：将相关的组件、页面、API等放在同一个功能目录下
  2. 合理使用别名：配置路径别名（如@），简化导入路径
  3. 保持单一职责：每个组件、函数只负责一个功能
  4. 使用TypeScript：提高代码质量和开发体验
  5. 添加README文件：为每个目录添加README，说明目录用途
  6. 遵循命名规范：组件使用PascalCase，文件使用kebab-case，函数使用camelCase

本集小结

在本集中，我们深入解析了Vue 3项目的各个文件和目录：

  • 根目录文件：index.html、package.json、vite.config.js等
  • public目录：存放不需要构建的静态资源
  • src目录：包含应用的所有源代码
    • main.js：应用入口文件
    • App.vue：根组件
    • components目录：存放自定义组件
    • assets目录：存放需要构建的静态资源
    • style.css：全局样式文件
  • 其他常用目录：views、router、store、api、utils、composables等

了解项目结构是开发Vue应用的基础，合理的项目结构可以提高代码的可维护性和可扩展性。在下一集中，我们将学习Vue 3的单文件组件（SFC），深入了解组件的结构和特性。

« 上一篇 创建第一个Vue 3项目 下一篇 » 单文件组件(SFC)揭秘
↑