前端项目结构深入：文件都是干什么的

一个完整前端项目的结构

以我们后续会用到的 Vue + Vite 项目为例：

my-project/
├── index.html              ← 浏览器打开的入口
├── package.json            ← 项目信息和依赖列表
├── vite.config.js          ← Vite 配置（一般不用改）
├── .gitignore              ← 告诉 Git 哪些文件不提交
├── README.md               ← 项目说明文档
├── node_modules/           ← 安装的依赖包（别动它）
├── public/                 ← 直接复制到最终产物的文件
│   └── favicon.ico         ← 网站小图标
└── src/                    ← 👈 你的主战场
    ├── main.js             ← 应用入口
    ├── App.vue             ← 根组件
    ├── style.css           ← 全局样式
    ├── assets/             ← 图片、字体等资源
    │   └── logo.png
    ├── components/         ← 可复用的组件
    │   ├── Header.vue
    │   └── Button.vue
    ├── views/              ← 页面级组件
    │   ├── Home.vue
    │   └── About.vue
    ├── router/             ← 路由配置
    │   └── index.js
    ├── stores/             ← 状态管理
    │   └── user.js
    └── utils/              ← 工具函数
        └── api.js

逐目录解释

src/components/ - 组件

可复用的 UI 片段。像一个乐高积木块。

Header.vue     → 顶部导航栏，每个页面都有
Button.vue     → 一个漂亮的按钮，到处都能用
Card.vue       → 信息卡片，列表中重复出现

src/views/ - 页面

一个完整的页面，通常对应一个路由。

Home.vue       → 首页
About.vue      → 关于页
User.vue       → 用户中心

src/router/ - 路由

路由决定了什么 URL 显示什么页面。

// router/index.js
const routes = [
  { path: '/', component: Home },        // 访问 / 显示首页
  { path: '/about', component: About },  // 访问 /about 显示关于
];

src/stores/ - 状态管理

管理跨页面共享的数据。

比如用户登录后，用户名要在导航栏、个人中心、评论区都显示——状态管理来负责这件事。

src/utils/ - 工具函数

可复用的纯逻辑函数。

// utils/format.js
export function formatDate(date) {
  return date.toLocaleDateString('zh-CN');
}

src/assets/ - 静态资源

图片、字体、图标等文件。

数据流向

用户操作
    ↓
组件（components / views）
    ↓
状态管理（stores） 或 直接调用 API
    ↓
工具函数（utils）处理数据
    ↓
更新页面显示

不用一次性记住

这些目录结构你不用一次性全记住。跟着教程做几个项目，自然而然就理解了。

下次看到不认识的文件夹或文件，直接问 AI：

“这个项目里的 router/index.js 是干什么用的？“

小结

现在你知道了一个前端项目的标准布局。记住核心：

• src/components/ = 积木块
• src/views/ = 完整页面
• src/router/ = 页面跳转规则

下一篇开始，我们正式进入提示词撰写技巧的学习。