LV.1 · 入门
MINI PROJECTS
小型实战项目
学了那么多语法，却不知道做什么？这一页给你三个能在一周内交付的小项目，配需求拆解、目录结构与练手建议。
做一个完整项目，胜过看一百集教程
—— 三亩地 · 实战理念
METHOD · 拆解
SKILL · 需求拆解
把"做一个待办 App"拆成能动手的任务
拿到一个项目需求，最忌讳一上来就开始敲代码。先把它拆成"页面 - 模块 - 函数"三层，再按从下到上实现。
- 第一层 · 页面：有几个页面？每个页面长什么样？
- 第二层 · 模块：每个页面有哪些功能模块？
- 第三层 · 函数：每个模块需要哪些函数支撑？
- 第四层 · 实现：每个函数的输入输出是什么？
STRUCTURE · 目录结构
一个能扩展的前端项目结构
好的目录结构让项目能从小做起、慢慢长大。下面是三亩地推荐的基础结构。
STRUCTURE · 目录
EXAMPLE · 目录树
分层清晰，职责单一
把样式、脚本、资源、文档分别放好，未来加功能、加测试、加构建工具都不需要重构。
my-app/ ├── index.html # 入口页面 ├── css/ │ ├── style.css # 全局样式 │ └── components.css # 组件样式 ├── js/ │ ├── main.js # 入口脚本 │ ├── api.js # 接口请求 │ ├── store.js # 数据状态 │ └── utils.js # 工具函数 ├── images/ # 静态资源 ├── docs/ # 项目文档 │ └── README.md ├── .gitignore └── package.json # 依赖与脚本
ADVICE · 练手建议
四条让你少走弯路的忠告
做项目的过程中，方法比速度更重要。下面四条是反复验证过的经验。
先做最小可用版本
第一版只做核心功能：能增、能查、能存。先把"能用"跑通，再加优化与扩展，避免功能堆太多做不完。
每个功能做完立刻提交
不要攒一大堆代码再 commit。每个小功能做完就提交一次，commit message 写清楚做了什么，方便回滚。
每天给项目留 1 小时
每天稳定 1 小时比周末狂写 8 小时更有效。大脑需要间隔来消化昨天写的代码，第二天的灵感往往来自昨天的沉淀。
写完一定要部署上线
本地能跑不等于真的能用。部署到 Vercel / GitHub Pages，让朋友打开试试，这一步会发现 80% 的隐藏问题。
项目不是用来"做完"的，是用来"做出来"的。先做出来，再做得好；做得好了，再做得快。