Vue3 目录结构详解 – 编程小白必备

Vue3 项目目录完全指南

专为编程小白设计的Vue3目录结构详解，使用通俗易懂的语言解释每个文件夹和文件的用途。

Vue 3.0+

新手友好

目录图解

Vue3 典型目录结构

项目目录树

my-vue-app 项目根目录

node_modules 依赖库

src 源代码

public 静态资源

.gitignore Git配置

package.json 项目配置

README.md 项目说明

vite.config.js 构建配置

核心目录说明

src 目录 – 核心源代码

Vue项目的心脏部位，所有Vue组件、业务逻辑、样式文件等都放在这里。

public 目录 – 静态资源

存放不需要打包的静态文件，比如网站图标(favicon.ico)、不需要处理的图片资源等。

node_modules 目录 – 依赖库

存放项目所有依赖的第三方库，这个文件夹不需要手动修改，通过npm或yarn自动管理。

package.json – 项目配置

项目的身份证，记录项目名称、版本、依赖包和脚本命令等重要信息。

src 目录深度解析

src 源代码目录

assets 静态资源

存放需要打包处理的静态资源，如图片、字体、样式文件等

components 组件

存放可复用的Vue组件，例如按钮、卡片、导航栏等

views 页面

存放页面级组件，通常与路由相对应，如首页、关于页

router 路由

配置应用的路由规则，决定URL显示哪个页面

store 状态管理

使用Vuex进行全局状态管理，存储共享数据

main.js 入口文件

整个Vue应用的起点，创建Vue实例并挂载到页面

App.vue 根组件

整个应用的根组件，所有其他组件都在此组件下渲染

组件 vs 页面

components 文件夹

存放可复用的UI组件
如：Button.vue, Card.vue, Navbar.vue
应该尽量保持”纯净”，不包含业务逻辑

views 文件夹

存放完整的页面视图
如：HomeView.vue, AboutView.vue
包含业务逻辑和数据请求

Vue3 新特性目录

composables 目录

存放Vue3的组合式API函数，用于封装可复用的逻辑

useUser.js, useCart.js, useApi.js

plugins 目录

存放Vue插件，如自定义指令、全局组件等

directives.js – 自定义指令
global-components.js – 全局组件注册

配置文件详解

package.json

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",      // 启动开发服务器
    "build": "vite build", // 打包生产环境代码
    "preview": "vite preview" // 预览生产版本
  },
  "dependencies": {
    "vue": "^3.2.0"     // Vue核心库
  },
  "devDependencies": {
    "vite": "^3.0.0",   // 构建工具
    "@vitejs/plugin-vue": "^3.0.0" // Vue插件
  }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],    // 使用Vue插件
  server: {
    port: 8080,        // 开发服务器端口
    open: true         // 自动打开浏览器
  }
})

.gitignore

告诉Git哪些文件不需要版本控制：

# 忽略node_modules目录
node_modules

# 忽略构建输出目录
dist

# 忽略环境变量文件
.env

目录管理最佳实践

命名规范

Vue文件使用PascalCase命名法：MyComponent.vue
JS工具文件使用camelCase命名法：utils.js
文件夹使用kebab-case命名法：user-profile

组件组织建议

按功能而非类型组织：user/目录下放所有用户相关的组件
复杂组件创建单独目录：ComplexComponent/index.vue + 相关文件
使用index.js统一导出组件，简化导入路径

新手常见错误

将图片等资源放错位置（该在assets的放到了public）
所有组件都堆在components根目录，没有分类
在public中放置需要构建的资源（如SASS文件）