为什么需要了解目录结构？
拿到一个 Vue CLI 3 生成的脚手架项目时，面对满屏的文件夹容易无从下手。其实只要理清核心目录的职责，后续开发和维护都会顺畅很多。下面这张表列出了默认生成的主要文件和目录，配合实际开发场景来看会更直观。
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建相关代码，基于 webpack。通常不需要修改，除非有特殊的打包需求。 |
| config | 配置目录，包含端口号、代理等设置。初学者建议先使用默认配置，熟悉后再按需调整。 |
| node_modules | npm 加载的项目依赖模块。体积较大，切勿手动删除或修改其中的内容。 |
| src | 核心开发目录，大部分业务逻辑都在这里。内部结构如下： |
| assets | 静态资源，如 logo 图片、字体等。 |
| components | 存放可复用的组件文件。 |
| App.vue | 根组件入口，也可以直接在此编写页面，不强制拆分到 components。 |
| main.js | 应用入口脚本，负责挂载实例和引入全局插件。 |
| static | 静态资源目录，存放不经过 webpack 处理的资源，如第三方库的字体文件。 |
| test | 初始测试目录，若未开始单元测试可直接删除。 |
| .xxxx 文件 | 这些是一些配置文件，包括语法配置、git 配置等。 |
| index.html | 首页入口，可以添加 meta 信息或统计代码。 |
| package.json | 项目配置文件，记录依赖版本及启动脚本。 |
| README.md | 项目的说明文档，markdown 格式。 |
避坑指南
在实际操作中，有几个地方容易踩坑。首先是 node_modules，每次拉取代码后记得运行 npm install 或 yarn，不要试图从其他机器拷贝这个文件夹。其次是 build 和 config，虽然官方推荐通过环境变量或覆盖配置来调整，但了解它们的存在能让你在遇到构建报错时更快定位问题。最后，src 目录是你的主战场，保持这里的整洁是长期维护的关键。
