Add comprehensive Vue 3 study plan documentation and README

[Copilot]

This PR adds structured learning documentation to organize the repository's educational content and provide clear guidance for front-end development learners.

Added Files

📋 Study Plan Documentation

• frontend-study-plan-vue.md - A comprehensive 12-week Vue 3 learning curriculum covering:

  • Complete technology stack (Vue 3, Vite, Vue Router, Pinia, Vitest)
  • Progressive weekly topics from HTML/CSS basics to TypeScript integration
  • Pure CSS approach with BEM naming conventions and design tokens
  • Self-assessment checklist for skill validation

• frontend-study-schedule-12h-4x3h.md - Detailed weekly schedule structure featuring:

  • 4×3 hour session breakdown for optimal learning rhythm
  • Session-by-session tasks and validation criteria for weeks 1-2
  • Clear deliverable expectations and deployment requirements

📖 Repository Documentation

• README.md - Main repository documentation including:
  • Study plan section with direct links to learning materials
  • Week 1 task checklist with specific deliverables
  • Overview of existing experimental content and folder structure

Benefits

This documentation transforms the repository from a collection of experiments into a structured learning environment that:

• Provides clear learning pathways for beginners
• Sets specific weekly goals and deliverables
• Integrates existing experimental content with systematic progression
• Supports both self-paced and guided learning approaches

The study plan emphasizes practical, deployable projects with modern front-end best practices while maintaining a pure CSS approach for foundational understanding.

This pull request was created as a result of the following prompt from Copilot chat.

Please create a new pull request in repository Wancj1128/web-html-css-js that does the following:

1. Add two new study-plan markdown files at the repository root with the exact contents below.

2. Update README.md to prominently link to these two new files near the top of the document. Implementation details:

   • If README.md already exists: Add a new section near the top titled "Study Plan" (or "学习计划") that includes bullet links to the two new files using relative links. Also add a short "This Week" block with a checklist for Week 1 deliverables:
     • Create a single-page resume/business card site (semantic HTML + responsive)
     • Deploy to GitHub Pages/Netlify/Vercel and add the live URL to README
     • Write a brief recap (what I learned, issues, next steps)
   • If README.md does not exist: Create README.md with a concise introduction, the two links, and the same Week 1 checklist section.

3. Do not modify or remove any other files. Keep changes minimal and focused on documentation.

Below are the two files to add. Use these contents exactly.

# 零基础前端学习计划（Vue 路线｜纯 CSS｜12周）

适用对象：从零开始的前端学习者  
技术栈：Vue 3 + Vite + Vue Router + Pinia + Vitest + Testing Library（样式使用纯 CSS，不用 Tailwind/Styled Components）  
学习强度：每周 12 小时（配套 4×3h 日程在 frontend-study-schedule-12h-4x3h.md）  
输出要求：每周 1 个可运行 Demo（附在线链接）+ README 复盘

---

## 总览路线图（Vue + 纯 CSS）

1) 基础三件套
- HTML：语义化、表单、媒体、基础可访问性
- CSS（纯 CSS）：选择器、盒模型、Flexbox/Grid、响应式、CSS 变量、媒体查询、过渡与动画
- JS：语法、作用域/闭包、原型、DOM、事件、异步（Promise/async）、模块化

2) 浏览器与网络
- DevTools 调试与性能面板
- HTTP/HTTPS、缓存策略、CORS、Cookie/Storage、安全（XSS/CSRF/CSP）

3) 工程化
- Node.js、npm（或 pnpm）
- Vite 脚手架与环境变量
- Git/GitHub 工作流、ESLint + Prettier

4) Vue 生态
- Vue 3（组合式 API）、组件化、props/emit、受控表单、插槽
- Vue Router（嵌套路由、动态路由、导航守卫）
- Pinia（state/getters/actions、模块化、可选持久化）
- 样式：纯 CSS（BEM 命名 + CSS 变量 + 媒体查询；可选 CSS Modules）

5) 质量与体验
- 测试（Vitest + Vue Testing Library）
- 可访问性（a11y）
- 性能优化（代码分割、懒加载、图片优化）

6) 进阶
- TypeScript（在 Vue/Pinia/Router 中落地）
- 认证（JWT/OAuth）与前端安全
- 部署（Vercel/Netlify/GitHub Pages）

---

## 周计划（12周）

> 每周执行：“学 → 做 → 交付 → 复盘”，保持最小可用产品输出。

### 第1周：HTML + CSS 入门（纯 CSS）
- 学：语义化标签、表单与输入类型；CSS 选择器、盒模型、常用单位（px/%/rem）
- 做：移动端优先的一页简历/名片
- 交付：语义化 + 响应式的单页（含在线链接）

### 第2周：布局与响应式
- 学：Flexbox、Grid、媒体查询、响应式图片
- 做：产品落地页（Hero/Features/Pricing/Footer）
- 交付：手机与桌面均表现良好

### 第3周：JavaScript 基础
- 学：变量/类型、数组/对象、函数、this/箭头函数、模块化初识
- 做：交互组件小合集（计时器/轮播/Tab）
- 交付：原生 JS 交互组件集

### 第4周：DOM、事件与数据处理
- 学：DOM 操作、事件委托、表单校验、节流/防抖、JSON
- 做：Todo App（增删改查 + LocalStorage）
- 交付：可用的 Todo 应用

### 第5周：异步与网络请求
- 学：Fetch、Promise/async、错误处理、CORS、简单缓存策略
- 做：公共 API 搜索（搜索/分页/加载与错误态）
- 交付：API 搜索应用

### 第6周：工程化与协作
- 学：Node、npm、Vite、环境变量、ESLint/Prettier、Git 分支与 PR
- 做：将第5周项目迁移到 Vite；建立 lint/format/build 脚本
- 交付：工程化重构后的项目 + 使用说明

### 第7周：Vue 3 入门（组合式 API）
- 学：Vite + Vue 初始化、模板语法、ref/reactive、computed、watch、组件/props/emit、插槽
- 做：组件练习（按钮/Input/对话框/通知）
- 交付：3–5 个可复用组件（配纯 CSS 样式）

### 第8周：路由与状态管理
- 学：Vue Router（嵌套/动态/守卫）；Pinia（state/getters/actions、模块化）
- 做：小型 SPA（多视图 + 守卫 + 全局状态）
- 交付：带路由与全局状态的应用

### 第9周：纯 CSS 设计体系与主题
- 学：BEM 命名、CSS 变量（设计令牌：颜色/间距/字号）、媒体查询、prefers-color-scheme、过渡/动画
- 做：为第8周项目统一样式系统；实现浅/深色主题切换（仅用 CSS 变量）
- 交付：统一视觉 + 主题切换的 SPA

### 第10周：测试、可访问性与性能
- 学：Vitest + Vue Testing Library、a11y（语义/对比度/键盘导航）、性能（代码分割/图片懒加载）
- 做：编写组件与 store 测试；跑 Lighthouse 并优化
- 交付：核心模块测试覆盖 >60% + Lighthouse 合格

### 第11周：TypeScript 实战
- 学：基础类型、接口、泛型、类型推断；在 Vue/Pinia/Router 中落地
- 做：将第8–9周项目核心模块迁移到 TS（组件 props/事件、store 类型）
- 交付：严格模式构建通过、类型无报错

### 第12周：综合实战与发布
- 做：电商迷你站/课程平台/看板（三选一）
  - 路由 + 状态 + API + 认证（模拟或简单后端）
  - 表单校验与错误、a11y、性能优化
- 交付：部署到 Vercel/Netlify，并写技术文档

---

## 纯 CSS 实施建议

- 结构化命名：BEM（block__element--modifier）
- 设计令牌：用 :root 定义 --color-primary、--spacing-sm、--font-size-base 等
- 主题切换：html[data-theme="dark"] 覆盖 CSS 变量；或使用 @media (prefers-color-scheme: dark)
- 响应式：移动端优先；使用 clamp() 进行流式字号/间距；媒体查询断点按内容需要设置
- 动效：transition/transform 为主，避免大范围 box-shadow 与昂贵动画

---

## Vue 技术栈与工具

- 脚手架：Vite（模板：vue）
- 路由：Vue Router
- 状态：Pinia（可选持久化插件）
- 样式：纯 CSS（必要时可用 CSS Modules，但不引入 Tailwind/SC）
- HTTP：fetch 或 axios（二选一）
- 测试：Vitest + Vue Testing Library
- Lint：ESLint（eslint-plugin-vue）+ Prettier
- VS Code 扩展：Volar、ESLint、Prettier、Auto Rename Tag、GitLens

---

## 快速起步（预览）

```bash
# 新建项目
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

# ESLint + Prettier（JS 版本）
npm i -D eslint eslint-plugin-vue @vue/eslint-config-prettier prettier

# Vue Router / Pinia
npm i vue-router pinia

# 测试
npm i -D vitest @vitejs/plugin-vue @vue/test-utils @testing-library/vue jsdom
```

---

## 自测清单

- [ ] HTML/CSS：语义化、表单、盒模型、Flex/Grid、响应式、CSS 变量/主题
- [ ] JS：作用域/闭包、DOM/事件、Promise/async、模块化、错误处理
- [ ] 浏览器与网络：DevTools、HTTP/CORS/缓存、存储与安全
- [ ] 工程化：Vite、环境变量、ESLint/Prettier、Git 工作流
- [ ] Vue 生态：组合式 API、组件通信、路由、Pinia
- [ ] 质量与进阶：测试、a11y、性能优化、TypeScript、部署

# 12 小时/周学习日程（4×3h 模式｜Vue 路线｜纯 CSS）

说明
- 模式：每周 4 次，每次 3 小时（建议固定 4 天，如 Tue/Thu/Sat/Sun）
- 方法：每次学习都进行“学 → 做 → 交付 → 复盘”，坚持小步快跑
- 交付：每周至少 1 个可运行 Demo（含在线部署链接）+ README 复盘

每次 3 小时建议结构
- 专注 65min × 2 + 10min 休息
- 复盘与提交 20–30min
- 机动缓冲 10–20min（查文档/微调样式）

---

## 固定周节奏（适用于 12 周）

- Session A（3h）学习与计划
  - 阅读 MDN/文档，做要点摘记
  - 制定本周任务清单与验收标准
- Session B（3h）基础练习
  - 针对本周关键点做 1–2 个小练习
- Session C（3h）项目主功能
  - 实现核心功能 A（最小可用版本）
- Session D（3h）打磨与交付
  - 实现功能 B；可访问性与细节；部署与复盘

Tips
- 每周至少 4 次提交：feat/bugfix/docs/refactor 分类清晰
- 优先保证“能用+可部署”，再持续打磨样式与体验

---

## 第1周（HTML + 纯 CSS 入门，12h）

目标
- 掌握语义化标签、表单基础、CSS 选择器与盒模型、常用单位（px/%/rem）
- 交付：移动端优先的一页简历/名片（语义化 + 响应式）

Session A（3h）学习与计划
- 学习：MDN（HTML 语义/表单、CSS 选择器/盒模型/display）
- 输出：摘记与速查清单；本周任务与标准
- 验收：提交 docs/notes/week1.md，列出关键概念与示例

Session B（3h）基础练习
- 练习 1：语义化结构（header/main/section/footer）
- 练习 2：卡片组件（含图片/标题/按钮，hover 状态）
- 练习 3：响应式图片（img + srcset/sizes）
- 验收：/practice/week1 下 2–3 个最小页面，代码通过校验

Session C（3h）项目主功能
- 项目：个人名片/简历单页（移动端优先）
- 实现：信息结构、基础排版、颜色/间距体系
- 验收：375px 视口无水平滚动，导航/锚点可用

Session D（3h）打磨与交付
- 增强：表单联络区（label/placeholder/必填校验）、按钮状态、链接可见性
- a11y：图片 alt、表单 label、颜色对比
- 部署：GitHub Pages/Netlify/Vercel；README 附在线链接与截图
- 验收标准：
  - 语义化合理（header/main/section/footer/ul/label/alt）
  - 响应式在 375/768/1024 正常、无水平滚动
  - Lighthouse a11y ≥ 90（静态页通常可达）
  - 交付：在线链接 + 源码 + README

---

## 第2周（布局与响应式，12h）

目标
- 掌握 Flexbox、Grid、媒体查询与响应式图片
- 交付：产品落地页（Hero/Features/Pricing/CTA/Footer），手机与桌面表现良好

Session A（3h）学习与计划
- 学习：Flex 容器/项目属性、Grid 模板/区域命名、媒体查询
- 输出：布局速查与常见布局草图；本周任务与标准
- 验收：提交 docs/notes/week2.md

Session B（3h）基础练习
- Flex：导航栏（左右对齐）、三列信息条
- Grid：杂志式区块（header/aside/main/footer）
- 验收：/practice/week2 下 2–3 个布局示例

Session C（3h）项目主功能
- 页面：搭建落地页结构与 Hero/Features 区块（移动端优先）
- 验收：主要区块在 375px 完整显示，排版清晰

Session D（3h）打磨与交付
- 完成：Pricing 卡片、CTA、Footer；桌面端断点布局
- 性能：响应式图片 srcset/sizes、图片延迟加载；Lighthouse 测试
- 验收标准：
  - Flex/Grid 使用恰当，元素对齐合理
  - 至少两个断点（<=640、>=1024）排版优
  - Lighthouse Performance ≥ 90（静态页通常可达）
  - 交付：在线链接 + 源码 + README（含断点策略与得分截图）

---

## 第3周（JavaScript 基础，12h）— 概要

- 学：变量/类型、数组/对象、函数、this/箭头函数、模块化初识
- 项目：交互组件小合集（计时器/轮播图/Tab）
- 节奏：按 4×3h 模板执行（如需我可出逐 Session 清单）

---

## 第4周（DOM/事件/数据处理，12h）— 概要

- 学：DOM 操作、事件委托、表单校验、节流/防抖、JSON
- 项目：Todo App（LocalStorage 增删改查）
- 节奏：按 4×3h 模板执行（如需我可出逐 Session 清单）

---

后续周次
- 第5–12周按 frontend-study-plan-vue.md 的主题推进
- 若需要，我可以为每一周生成“逐 Session（3h）任务 + 验收标准 + 资料链接”

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.