项目目录结构详解

了解Vue3项目的目录结构是学习Vue3的重要一步，它可以帮助你理解项目的组织方式和各个文件的作用。本章节将详细介绍Vue3项目的目录结构。

标准项目结构

使用create-vue创建的Vue3项目结构如下：

my-vue3-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   │   └── counter.js
│   ├── views/
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue
│   └── main.js
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

目录详解

1. public/ 目录

作用：存放静态资源，这些资源不会被Vite处理
常见文件：
- favicon.ico：网站图标
- 其他静态文件，如图片、字体等

2. src/ 目录

作用：存放源代码
子目录：
- assets/：存放静态资源，这些资源会被Vite处理
- components/：存放组件
- router/：存放路由配置
- stores/：存放状态管理
- views/：存放页面组件

3. 核心文件

index.html

作用：HTML模板文件
位置：项目根目录
内容：包含Vue应用的挂载点

html

<!DOCTYPE html>
<html lang="en">
  <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 + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

作用：应用入口文件
位置：src/ 目录
内容：创建Vue应用实例，注册插件

javascript

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

App.vue

作用：根组件
位置：src/ 目录
内容：应用的主要结构

vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

<style>
nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-active {
  color: #42b983;
}
</style>

router/index.js

作用：路由配置文件
位置：src/router/ 目录
内容：定义路由规则

javascript

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

stores/counter.js

作用：状态管理文件
位置：src/stores/ 目录
内容：定义状态、getters和actions

javascript

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

components/HelloWorld.vue

作用：示例组件
位置：src/components/ 目录
内容：组件的模板、脚本和样式

vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="count++">count is: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const msg = 'Hello World!'
const count = ref(0)
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

views/HomeView.vue 和 views/AboutView.vue

作用：页面组件
位置：src/views/ 目录
内容：页面的模板、脚本和样式

4. 配置文件

package.json

作用：项目配置文件
位置：项目根目录
内容：定义项目依赖、脚本命令等

json

{
  "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.4",
    "vue-router": "^4.2.4",
    "pinia": "^2.1.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}

vite.config.js

作用：Vite配置文件
位置：项目根目录
内容：配置Vite的行为

javascript

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

.eslintrc.cjs

作用：ESLint配置文件
位置：项目根目录
内容：配置代码质量检查规则

.gitignore

作用：Git忽略文件
位置：项目根目录
内容：定义Git忽略的文件和目录

目录结构的最佳实践

1. 组件命名

组件名：使用大驼峰命名法，如 HelloWorld.vue
目录名：使用小写字母，单词之间用连字符连接，如 components

2. 文件组织

按功能组织：将相关的组件和文件放在一起
模块化：将复杂的功能拆分为多个模块
可维护性：保持目录结构清晰，便于维护

3. 推荐的目录结构

对于大型项目，推荐以下目录结构：

my-vue3-app/
├── public/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 通用组件
│   ├── composables/     # 自定义组合式API
│   ├── directives/      # 自定义指令
│   ├── layouts/         # 布局组件
│   ├── pages/           # 页面组件
│   ├── router/          # 路由配置
│   ├── stores/          # 状态管理
│   ├── services/        # API服务
│   ├── utils/           # 工具函数
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

总结

了解Vue3项目的目录结构是学习Vue3的基础，它可以帮助你理解项目的组织方式和各个文件的作用。通过合理的目录结构，你可以提高代码的可维护性和可读性，使项目更加规范和专业。

在后续的章节中，我们将学习如何运行和打包Vue3项目，以及如何使用Vue3的核心功能。

项目目录结构详解 ​

标准项目结构 ​

目录详解 ​

1. public/ 目录 ​

2. src/ 目录 ​

3. 核心文件 ​

index.html ​

main.js ​

App.vue ​

router/index.js ​

stores/counter.js ​

components/HelloWorld.vue ​

views/HomeView.vue 和 views/AboutView.vue ​

4. 配置文件 ​

package.json ​

vite.config.js ​

.eslintrc.cjs ​

.gitignore ​

目录结构的最佳实践 ​

1. 组件命名 ​

2. 文件组织 ​

3. 推荐的目录结构 ​

总结 ​

项目目录结构详解

标准项目结构

目录详解

1. public/ 目录

2. src/ 目录

3. 核心文件

index.html

main.js

App.vue

router/index.js

stores/counter.js

components/HelloWorld.vue

views/HomeView.vue 和 views/AboutView.vue

4. 配置文件

package.json

vite.config.js

.eslintrc.cjs

.gitignore

目录结构的最佳实践

1. 组件命名

2. 文件组织

3. 推荐的目录结构

总结