3个月前端开发学习计划（从零到项目实战）
本计划专为零基础学习者设计，遵循「基础→进阶→实战」三阶段路径，结合真实项目驱动学习，3个月后可独立完成企业级前端项目。
📅 第一月：夯实基础 —— HTML + CSS + JavaScript 核心三件套
✅ 每月目标
- 掌握HTML语义化标签与表单结构
- 熟练使用CSS实现响应式布局（Flex + Grid）
- 理解JS基础语法、DOM操作与事件处理
- 能独立完成2个静态页面仿写
📚 每日学习建议（建议每天1.5~2小时）
- 上午（40分钟）：学习1个新知识点（如：CSS盒模型、JS数组方法）
- 下午（60分钟）：动手编码实践（在VS Code中编写并预览）
- 晚上（20分钟）：回顾总结 + 记录笔记（推荐使用Notion或语雀）
🔧 推荐工具
- 编辑器：VS Code（安装插件：Live Server、Prettier、ESLint）
- 文档：MDN Web Docs（权威、免费、中文）
- 调试：浏览器F12开发者工具（重点掌握Elements、Console、Network）
🖼️ 实践项目（选做1~2个）
- 个人简历页：使用HTML5语义化标签 + CSS Flex布局，实现响应式排版
- 豆瓣电影列表页：模仿豆瓣首页，使用CSS Grid实现卡片式布局
✅ 成功标准：不依赖框架，纯原生代码实现视觉还原度达90%以上。
📅 第二月：进阶工程化 —— ES6+、Vite、Axios、Vue3
✅ 每月目标
- 掌握ES6+核心语法（解构、箭头函数、Promise、async/await）
- 理解前端工程化概念：包管理（npm）、构建工具（Vite）
- 学会使用Vue3开发组件化应用
- 能调用公开API获取数据并渲染页面
📚 每日学习建议
- 上午：学习1个新概念（如：模块化、响应式原理）
- 下午：在Vite项目中实现功能模块（如：创建一个可复用的Button组件）
- 晚上：阅读官方文档，记录踩坑经验
🔧 推荐工具与资源
| 类型 | 工具/资源 | 说明 |
|---|---|---|
| 构建工具 | Vite | 官方推荐，启动快、热更新秒级 |
| 包管理 | npm / pnpm | 用 npm init vite@latest 快速创建项目 |
| 框架 | Vue3 官方文档 | 重点学习：Composition API、组件通信、生命周期 |
| HTTP请求 | Axios | 比原生fetch更友好，支持拦截器与错误处理 |
🚀 实战项目（必做）
- TodoList 应用（Vue3 + Axios）
- 功能：增删改查任务、本地存储（localStorage）
- 技术点：组件化、props/emits、v-model、computed、watch
- 接口：可使用 JSONPlaceholder 模拟后端
- 天气查询页
✅ 成功标准：项目部署到Vercel或GitHub Pages，能公开访问。
📅 第三月：项目实战 —— 电商后台管理系统
✅ 每月目标
- 独立完成一个完整后台管理系统
- 掌握状态管理（Pinia）、路由（Vue Router）
- 理解UI组件库使用与项目结构规范
- 具备解决真实业务问题的能力
🔧 推荐技术栈
- 框架：Vue3 + TypeScript（可选）
- UI库：Element Plus（中文友好、组件丰富）
- 状态管理：Pinia（Vue3官方推荐）
- 路由：Vue Router 4
- 代码规范：ESLint + Prettier
🏗️ 实战项目：电商后台管理系统（核心模块）
| 模块 | 功能描述 | 技术要点 |
|---|---|---|
| 登录页 | 用户名/密码登录 | 表单校验、Token存储、路由守卫 |
| 商品列表 | 展示商品、分页、搜索 | Table组件、Axios分页请求、防抖 |
| 商品编辑 | 新增/修改商品信息 | Form表单、文件上传（图片）、表单校验 |
| 数据统计 | 图表展示销量趋势 | ECharts 集成 |
| 权限控制 | 按角色显示菜单 | 路由权限控制、Vuex/Pinia状态管理 |
💡 项目建议：使用Mock数据（如 Mock.js）模拟后端接口，无需搭建真实服务器。
📁 项目结构规范（推荐）
src/
├── assets/ # 静态资源
├── components/ # 公共组件
├── views/ # 页面组件
│ ├── Login.vue
│ ├── ProductList.vue
│ └── Dashboard.vue
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── services/ # API请求封装
├── utils/ # 工具函数
└── App.vue & main.js
📌 总结：三个月学习成果
| 时间 | 能力目标 |
|---|---|
| 第1月 | 能写出语义化、响应式静态页面 |
| 第2月 | 能用Vue3开发交互式单页应用，调用API |
| 第3月 | 能独立完成一个具备完整功能的后台管理系统 |
✅ 最终交付物：
- GitHub仓库（含完整代码与README）
- 3个可访问的在线项目（Vercel/Netlify）
- 一份学习笔记（Markdown或语雀）
📚 推荐学习资源清单
| 类型 | 名称 | 链接 |
|---|---|---|
| 文档 | MDN Web Docs | developer.mozilla.org/zh-CN/ |
| 文档 | Vue3 官方文档 | vuejs.org/guide/intro… |
| 视频 | B站《Vue3零基础入门》 | www.bilibili.com/video/BV1oo… |
| 视频 | 前端网络请求速通 | www.bilibili.com/video/BV1eP… |
| 工具 | Vite脚手架 | npm create vite@latest |
| 工具 | VS Code + 插件 | Volar、ESLint、Prettier |
| 工具 | JSONPlaceholder | jsonplaceholder.typicode.com/ |
💬 学习忠告：不要追求学完所有技术，而是用项目倒逼学习。当你在实现TodoList时卡在“如何保存数据”，你就自然会去查localStorage；当你想美化界面时，你就主动去学Flex布局。实践是最好的老师。
