Web前端技术分享：从零基础到实战项目开发的完整指南

引言

Web前端开发是当今IT行业中最热门的领域之一，它负责构建用户直接交互的网页界面。随着互联网技术的飞速发展，前端技术栈也在不断演进，从早期的HTML/CSS/JavaScript到如今的React、Vue、Angular等现代框架，前端开发的复杂度和重要性都在不断提升。本文将为零基础学习者提供一个完整的前端学习路径，从基础概念到实战项目开发，帮助你系统地掌握前端技术。

第一部分：前端开发基础

1.1 HTML：网页的骨架

HTML（HyperText Markup Language）是构建网页的基础，它定义了网页的结构和内容。

核心概念：

标签：HTML使用标签来定义元素，如<h1>、<p>、<div>等
属性：为标签提供额外信息，如class、id、src等
文档结构：标准的HTML5文档结构

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>首页内容</h2>
            <p>这是一个示例段落，展示HTML的基本用法。</p>
            <img src="example.jpg" alt="示例图片" width="300">
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 我的网站. 保留所有权利。</p>
    </footer>
</body>
</html>

学习建议：

理解语义化标签（如<header>、<nav>、<main>、<footer>）
掌握表单元素（<form>、<input>、<select>等）
了解HTML5新特性（如Canvas、Video、Audio等）

1.2 CSS：网页的样式

CSS（Cascading Style Sheets）负责网页的视觉表现，包括布局、颜色、字体等。

核心概念：

选择器：用于选择要应用样式的HTML元素
盒模型：理解内容(content)、内边距(padding)、边框(border)和外边距(margin)
布局技术：Flexbox、Grid、传统浮动布局

示例代码：

/* 基础样式 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 导航栏样式 */
nav {
    background-color: #333;
    padding: 1rem;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0 1rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #555;
}

/* 主内容区域 */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    
    nav li {
        margin: 0.5rem 0;
    }
}

学习建议：

掌握CSS选择器的优先级和特异性
理解Flexbox和Grid布局系统
学习CSS预处理器（如Sass/SCSS）
了解CSS动画和过渡效果

1.3 JavaScript：网页的交互

JavaScript是前端开发的核心，负责网页的动态行为和交互逻辑。

核心概念：

变量和数据类型：let、const、var的区别
函数：函数声明、箭头函数、高阶函数
DOM操作：选择元素、修改内容、事件处理
异步编程：Promise、async/await、AJAX

示例代码：

// DOM操作示例
document.addEventListener('DOMContentLoaded', function() {
    // 选择元素
    const header = document.querySelector('header h1');
    const navLinks = document.querySelectorAll('nav a');
    const sections = document.querySelectorAll('section');
    
    // 修改内容
    header.textContent = '欢迎来到我的交互式网站';
    
    // 事件处理
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);
            
            if (targetSection) {
                targetSection.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 动态创建元素
    const newSection = document.createElement('section');
    newSection.id = 'dynamic';
    newSection.innerHTML = `
        <h2>动态创建的内容</h2>
        <p>这是通过JavaScript动态添加的段落。</p>
        <button id="dynamicBtn">点击我</button>
    `;
    document.querySelector('main').appendChild(newSection);
    
    // 异步操作示例
    const dynamicBtn = document.getElementById('dynamicBtn');
    if (dynamicBtn) {
        dynamicBtn.addEventListener('click', async function() {
            try {
                const response = await fetch('https://api.example.com/data');
                const data = await response.json();
                alert(`获取到的数据: ${JSON.stringify(data)}`);
            } catch (error) {
                console.error('请求失败:', error);
            }
        });
    }
});

学习建议：

掌握ES6+新特性（解构赋值、模板字符串、模块化等）
理解事件循环和异步编程
学习面向对象编程和函数式编程思想
了解浏览器API（如localStorage、SessionStorage等）

第二部分：现代前端框架

2.1 React框架

React是由Facebook开发的前端框架，采用组件化开发思想。

核心概念：

组件：函数组件和类组件
状态管理：useState、useEffect等Hooks
虚拟DOM：高效的DOM更新机制
JSX语法：JavaScript XML，类似HTML的语法

示例代码：

// React组件示例
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [count, setCount] = useState(0);
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    
    // 副作用管理
    useEffect(() => {
        document.title = `点击次数: ${count}`;
    }, [count]);
    
    // 异步数据获取
    const fetchUsers = async () => {
        setLoading(true);
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const data = await response.json();
            setUsers(data.slice(0, 5)); // 只显示前5个用户
        } catch (error) {
            console.error('获取用户失败:', error);
        } finally {
            setLoading(false);
        }
    };
    
    return (
        <div className="app">
            <header className="app-header">
                <h1>React计数器应用</h1>
                <p>当前计数: {count}</p>
                <button onClick={() => setCount(count + 1)}>
                    增加计数
                </button>
                <button onClick={() => setCount(0)}>
                    重置
                </button>
            </header>
            
            <main className="app-main">
                <section>
                    <h2>用户列表</h2>
                    <button onClick={fetchUsers} disabled={loading}>
                        {loading ? '加载中...' : '获取用户'}
                    </button>
                    
                    {users.length > 0 && (
                        <ul className="user-list">
                            {users.map(user => (
                                <li key={user.id} className="user-item">
                                    <strong>{user.name}</strong>
                                    <span>{user.email}</span>
                                </li>
                            ))}
                        </ul>
                    )}
                </section>
                
                <section>
                    <h2>组件状态管理</h2>
                    <Counter />
                </section>
            </main>
        </div>
    );
}

// 子组件示例
function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div className="counter">
            <p>子组件计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>+</button>
            <button onClick={() => setCount(count - 1)}>-</button>
            <button onClick={() => setCount(0)}>重置</button>
        </div>
    );
}

export default App;

学习建议：

掌握React Hooks的使用
理解组件生命周期（类组件）和Hooks生命周期（函数组件）
学习React Router进行路由管理
了解状态管理库（如Redux、MobX）

2.2 Vue.js框架

Vue.js是一个渐进式JavaScript框架，易于上手且功能强大。

核心概念：

响应式系统：数据驱动视图
组件系统：单文件组件（.vue文件）
指令：v-if、v-for、v-model等
生命周期钩子：created、mounted、updated等

示例代码：

<!-- Vue单文件组件示例 -->
<template>
    <div id="app">
        <header class="app-header">
            <h1>Vue计数器应用</h1>
            <p>当前计数: {{ count }}</p>
            <button @click="increment">增加计数</button>
            <button @click="reset">重置</button>
        </header>
        
        <main class="app-main">
            <section>
                <h2>用户列表</h2>
                <button @click="fetchUsers" :disabled="loading">
                    {{ loading ? '加载中...' : '获取用户' }}
                </button>
                
                <ul v-if="users.length > 0" class="user-list">
                    <li v-for="user in users" :key="user.id" class="user-item">
                        <strong>{{ user.name }}</strong>
                        <span>{{ user.email }}</span>
                    </li>
                </ul>
            </section>
            
            <section>
                <h2>组件状态管理</h2>
                <Counter :initial-count="5" @update-count="handleCountUpdate" />
                <p>父组件接收的计数: {{ receivedCount }}</p>
            </section>
        </main>
    </div>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
    name: 'App',
    components: {
        Counter
    },
    data() {
        return {
            count: 0,
            users: [],
            loading: false,
            receivedCount: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        },
        reset() {
            this.count = 0;
        },
        async fetchUsers() {
            this.loading = true;
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/users');
                const data = await response.json();
                this.users = data.slice(0, 5);
            } catch (error) {
                console.error('获取用户失败:', error);
            } finally {
                this.loading = false;
            }
        },
        handleCountUpdate(count) {
            this.receivedCount = count;
        }
    },
    watch: {
        count(newVal) {
            document.title = `点击次数: ${newVal}`;
        }
    },
    mounted() {
        console.log('组件已挂载');
    }
};
</script>

<style scoped>
.app-header {
    background-color: #42b983;
    color: white;
    padding: 1rem;
    text-align: center;
}

.app-main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.user-list {
    list-style: none;
    padding: 0;
}

.user-item {
    background: white;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

学习建议：

掌握Vue的响应式原理
理解组件通信（props、$emit、事件总线、Vuex）
学习Vue Router和状态管理（Vuex/Pinia）
了解Vue 3的Composition API

2.3 Angular框架

Angular是一个由Google维护的完整前端框架，适合大型企业级应用。

核心概念：

TypeScript：Angular使用TypeScript作为主要语言
模块化：NgModule系统
依赖注入：强大的DI系统
双向数据绑定：[(ngModel)]语法

示例代码：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface User {
    id: number;
    name: string;
    email: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'Angular计数器应用';
    count = 0;
    users: User[] = [];
    loading = false;
    
    constructor(private http: HttpClient) {}
    
    ngOnInit() {
        console.log('应用初始化');
    }
    
    increment() {
        this.count++;
        this.updateTitle();
    }
    
    reset() {
        this.count = 0;
        this.updateTitle();
    }
    
    private updateTitle() {
        this.title = `点击次数: ${this.count}`;
    }
    
    fetchUsers() {
        this.loading = true;
        this.http.get<User[]>('https://jsonplaceholder.typicode.com/users')
            .subscribe({
                next: (data) => {
                    this.users = data.slice(0, 5);
                    this.loading = false;
                },
                error: (error) => {
                    console.error('获取用户失败:', error);
                    this.loading = false;
                }
            });
    }
}

<!-- app.component.html -->
<div class="app">
    <header class="app-header">
        <h1>{{ title }}</h1>
        <p>当前计数: {{ count }}</p>
        <button (click)="increment()">增加计数</button>
        <button (click)="reset()">重置</button>
    </header>
    
    <main class="app-main">
        <section>
            <h2>用户列表</h2>
            <button (click)="fetchUsers()" [disabled]="loading">
                {{ loading ? '加载中...' : '获取用户' }}
            </button>
            
            <ul *ngIf="users.length > 0" class="user-list">
                <li *ngFor="let user of users" class="user-item">
                    <strong>{{ user.name }}</strong>
                    <span>{{ user.email }}</span>
                </li>
            </ul>
        </section>
        
        <section>
            <h2>组件状态管理</h2>
            <app-counter [initialCount]="5" (updateCount)="handleCountUpdate($event)"></app-counter>
            <p>父组件接收的计数: {{ receivedCount }}</p>
        </section>
    </main>
</div>

学习建议：

掌握TypeScript基础
理解Angular的模块系统和依赖注入
学习Angular路由和表单处理
了解RxJS在Angular中的应用

第三部分：前端工程化

3.1 包管理工具

npm和yarn：

# 初始化项目
npm init -y

# 安装依赖
npm install react react-dom
npm install --save-dev webpack webpack-cli

# 使用yarn
yarn init -y
yarn add react react-dom
yarn add --dev webpack webpack-cli

# 查看依赖树
npm list
yarn list

3.2 构建工具

Webpack配置示例：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name][ext][query]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'styles/[name].css'
        })
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 3000,
        open: true,
        hot: true
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
};

Vite配置示例：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
    server: {
        port: 3000,
        open: true
    },
    build: {
        outDir: 'dist',
        sourcemap: true
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/styles/variables.scss";`
            }
        }
    }
});

3.3 代码规范和质量

ESLint配置示例：

// .eslintrc.js
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:@typescript-eslint/recommended'
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 12,
        sourceType: 'module'
    },
    plugins: ['react', '@typescript-eslint'],
    rules: {
        'react/react-in-jsx-scope': 'off',
        'react/prop-types': 'off',
        'no-console': 'warn',
        'no-unused-vars': 'warn',
        'indent': ['error', 4],
        'linebreak-style': ['error', 'unix'],
        'quotes': ['error', 'single'],
        'semi': ['error', 'always']
    },
    settings: {
        react: {
            version: 'detect'
        }
    }
};

Prettier配置示例：

// .prettierrc
{
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "endOfLine": "lf"
}

第四部分：实战项目开发

4.1 项目规划

项目需求分析：

明确项目目标和功能需求
确定技术栈（React/Vue/Angular + 状态管理 + 路由）
设计项目架构和目录结构
制定开发计划和时间表

示例项目：待办事项应用（Todo List）

功能需求：

添加新任务
标记任务完成/未完成
删除任务
任务分类（工作、生活、学习）
任务搜索和过滤
数据持久化（localStorage）

4.2 项目架构设计

目录结构示例：

todo-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── TodoForm.jsx
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   │   └── FilterButtons.jsx
│   ├── hooks/
│   │   └── useTodo.js
│   ├── context/
│   │   └── TodoContext.js
│   ├── utils/
│   │   └── storage.js
│   ├── styles/
│   │   ├── main.css
│   │   └── components/
│   ├── App.jsx
│   └── index.js
├── package.json
├── .gitignore
├── .eslintrc.js
├── .prettierrc
└── README.md

4.3 核心代码实现

1. 状态管理（Context API）：

// src/context/TodoContext.js
import React, { createContext, useContext, useReducer, useEffect } from 'react';
import { saveTodos, loadTodos } from '../utils/storage';

const TodoContext = createContext();

const todoReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            const newTodo = {
                id: Date.now(),
                text: action.payload.text,
                category: action.payload.category,
                completed: false,
                createdAt: new Date().toISOString()
            };
            return [...state, newTodo];
            
        case 'TOGGLE_TODO':
            return state.map(todo =>
                todo.id === action.payload.id
                    ? { ...todo, completed: !todo.completed }
                    : todo
            );
            
        case 'DELETE_TODO':
            return state.filter(todo => todo.id !== action.payload.id);
            
        case 'SET_TODOS':
            return action.payload;
            
        default:
            return state;
    }
};

export const TodoProvider = ({ children }) => {
    const [todos, dispatch] = useReducer(todoReducer, []);
    
    // 从localStorage加载数据
    useEffect(() => {
        const savedTodos = loadTodos();
        if (savedTodos) {
            dispatch({ type: 'SET_TODOS', payload: savedTodos });
        }
    }, []);
    
    // 保存到localStorage
    useEffect(() => {
        saveTodos(todos);
    }, [todos]);
    
    const addTodo = (text, category) => {
        dispatch({
            type: 'ADD_TODO',
            payload: { text, category }
        });
    };
    
    const toggleTodo = (id) => {
        dispatch({
            type: 'TOGGLE_TODO',
            payload: { id }
        });
    };
    
    const deleteTodo = (id) => {
        dispatch({
            type: 'DELETE_TODO',
            payload: { id }
        });
    };
    
    const value = {
        todos,
        addTodo,
        toggleTodo,
        deleteTodo
    };
    
    return (
        <TodoContext.Provider value={value}>
            {children}
        </TodoContext.Provider>
    );
};

export const useTodo = () => {
    const context = useContext(TodoContext);
    if (!context) {
        throw new Error('useTodo必须在TodoProvider内使用');
    }
    return context;
};

2. 工具函数：

// src/utils/storage.js
const STORAGE_KEY = 'todo-app-data';

export const saveTodos = (todos) => {
    try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
    } catch (error) {
        console.error('保存数据失败:', error);
    }
};

export const loadTodos = () => {
    try {
        const data = localStorage.getItem(STORAGE_KEY);
        return data ? JSON.parse(data) : [];
    } catch (error) {
        console.error('加载数据失败:', error);
        return [];
    }
};

3. 主组件：

// src/App.jsx
import React from 'react';
import { TodoProvider } from './context/TodoContext';
import Header from './components/Header';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
import FilterButtons from './components/FilterButtons';
import './styles/main.css';

function App() {
    return (
        <TodoProvider>
            <div className="app-container">
                <Header />
                <main className="main-content">
                    <TodoForm />
                    <FilterButtons />
                    <TodoList />
                </main>
            </div>
        </TodoProvider>
    );
}

export default App;

4. TodoForm组件：

// src/components/TodoForm.jsx
import React, { useState } from 'react';
import { useTodo } from '../context/TodoContext';

const TodoForm = () => {
    const [text, setText] = useState('');
    const [category, setCategory] = useState('work');
    const { addTodo } = useTodo();
    
    const handleSubmit = (e) => {
        e.preventDefault();
        if (text.trim()) {
            addTodo(text, category);
            setText('');
        }
    };
    
    return (
        <form className="todo-form" onSubmit={handleSubmit}>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="输入新任务..."
                className="todo-input"
            />
            <select
                value={category}
                onChange={(e) => setCategory(e.target.value)}
                className="category-select"
            >
                <option value="work">工作</option>
                <option value="life">生活</option>
                <option value="study">学习</option>
            </select>
            <button type="submit" className="add-btn">
                添加任务
            </button>
        </form>
    );
};

export default TodoForm;

5. TodoList组件：

// src/components/TodoList.jsx
import React, { useState } from 'react';
import { useTodo } from '../context/TodoContext';
import TodoItem from './TodoItem';

const TodoList = () => {
    const { todos } = useTodo();
    const [filter, setFilter] = useState('all');
    const [searchTerm, setSearchTerm] = useState('');
    
    const filteredTodos = todos.filter(todo => {
        // 分类过滤
        if (filter !== 'all' && todo.category !== filter) {
            return false;
        }
        // 搜索过滤
        if (searchTerm && !todo.text.toLowerCase().includes(searchTerm.toLowerCase())) {
            return false;
        }
        return true;
    });
    
    return (
        <div className="todo-list-container">
            <div className="search-box">
                <input
                    type="text"
                    placeholder="搜索任务..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="search-input"
                />
            </div>
            
            {filteredTodos.length === 0 ? (
                <p className="empty-message">暂无任务</p>
            ) : (
                <ul className="todo-list">
                    {filteredTodos.map(todo => (
                        <TodoItem key={todo.id} todo={todo} />
                    ))}
                </ul>
            )}
        </div>
    );
};

export default TodoList;

6. TodoItem组件：

// src/components/TodoItem.jsx
import React from 'react';
import { useTodo } from '../context/TodoContext';

const TodoItem = ({ todo }) => {
    const { toggleTodo, deleteTodo } = useTodo();
    
    const categoryColors = {
        work: '#3498db',
        life: '#2ecc71',
        study: '#e74c3c'
    };
    
    return (
        <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
            <div className="todo-content">
                <span 
                    className="category-badge"
                    style={{ backgroundColor: categoryColors[todo.category] }}
                >
                    {todo.category}
                </span>
                <span className="todo-text">{todo.text}</span>
            </div>
            <div className="todo-actions">
                <button
                    onClick={() => toggleTodo(todo.id)}
                    className={`toggle-btn ${todo.completed ? 'completed' : ''}`}
                >
                    {todo.completed ? '✓' : '○'}
                </button>
                <button
                    onClick={() => deleteTodo(todo.id)}
                    className="delete-btn"
                >
                    删除
                </button>
            </div>
        </li>
    );
};

export default TodoItem;

4.4 样式设计

CSS模块化示例：

/* src/styles/main.css */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --danger-color: #e74c3c;
    --bg-color: #f8f9fa;
    --text-color: #333;
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.app-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Header样式 */
.header {
    background: linear-gradient(135deg, var(--primary-color), #2980b9);
    color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: var(--box-shadow);
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* 表单样式 */
.todo-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.todo-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: border-color 0.3s;
}

.todo-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.category-select {
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    background: white;
    font-size: 1rem;
    cursor: pointer;
}

.add-btn {
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.add-btn:hover {
    background: #2980b9;
}

/* 搜索框 */
.search-box {
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Todo列表 */
.todo-list {
    list-style: none;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.todo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.todo-item.completed {
    opacity: 0.6;
    background: #f8f9fa;
}

.todo-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.category-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.todo-text {
    font-size: 1.1rem;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
}

.todo-actions {
    display: flex;
    gap: 0.5rem;
}

.toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: white;
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle-btn.completed {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.delete-btn {
    padding: 0.5rem 1rem;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-btn:hover {
    background: #c0392b;
}

.empty-message {
    text-align: center;
    color: #7f8c8d;
    font-size: 1.2rem;
    padding: 2rem;
}

/* 响应式设计 */
@media (max-width: 600px) {
    .todo-form {
        flex-direction: column;
    }
    
    .todo-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .todo-actions {
        align-self: flex-end;
    }
    
    .header h1 {
        font-size: 2rem;
    }
}

4.5 测试和部署

单元测试示例（Jest + React Testing Library）：

// src/components/__tests__/TodoForm.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { TodoProvider } from '../context/TodoContext';
import TodoForm from '../TodoForm';

// Mock useTodo hook
jest.mock('../context/TodoContext', () => ({
    useTodo: () => ({
        addTodo: jest.fn()
    })
}));

describe('TodoForm', () => {
    test('renders form elements correctly', () => {
        render(
            <TodoProvider>
                <TodoForm />
            </TodoProvider>
        );
        
        expect(screen.getByPlaceholderText('输入新任务...')).toBeInTheDocument();
        expect(screen.getByRole('combobox')).toBeInTheDocument();
        expect(screen.getByText('添加任务')).toBeInTheDocument();
    });
    
    test('submits form with correct data', () => {
        const mockAddTodo = jest.fn();
        jest.spyOn(require('../context/TodoContext'), 'useTodo')
            .mockReturnValue({ addTodo: mockAddTodo });
        
        render(
            <TodoProvider>
                <TodoForm />
            </TodoProvider>
        );
        
        const input = screen.getByPlaceholderText('输入新任务...');
        const select = screen.getByRole('combobox');
        const button = screen.getByText('添加任务');
        
        fireEvent.change(input, { target: { value: '测试任务' } });
        fireEvent.change(select, { target: { value: 'study' } });
        fireEvent.click(button);
        
        expect(mockAddTodo).toHaveBeenCalledWith('测试任务', 'study');
    });
});

部署配置示例：

// package.json 脚本部分
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "test": "jest",
        "test:watch": "jest --watch",
        "lint": "eslint src --ext .js,.jsx",
        "lint:fix": "eslint src --ext .js,.jsx --fix",
        "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
    }
}

部署到Vercel：

安装Vercel CLI：npm i -g vercel
构建项目：npm run build
部署：vercel --prod

第五部分：进阶学习路径

5.1 性能优化

代码分割和懒加载：

// React路由懒加载示例
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 懒加载组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
    return (
        <Router>
            <Suspense fallback={<div>加载中...</div>}>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/contact" element={<Contact />} />
                </Routes>
            </Suspense>
        </Router>
    );
}

虚拟列表优化：

// 使用react-window进行虚拟列表优化
import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
    <div style={style}>
        Item {index}
    </div>
);

const VirtualList = () => (
    <List
        height={400}
        itemCount={10000}
        itemSize={35}
        width={300}
    >
        {Row}
    </List>
);

5.2 TypeScript深入

类型定义示例：

// types/todo.ts
export interface Todo {
    id: number;
    text: string;
    category: 'work' | 'life' | 'study';
    completed: boolean;
    createdAt: string;
}

export interface TodoContextType {
    todos: Todo[];
    addTodo: (text: string, category: string) => void;
    toggleTodo: (id: number) => void;
    deleteTodo: (id: number) => void;
}

// 类型守卫
export function isTodo(obj: any): obj is Todo {
    return (
        obj &&
        typeof obj.id === 'number' &&
        typeof obj.text === 'string' &&
        typeof obj.category === 'string' &&
        typeof obj.completed === 'boolean' &&
        typeof obj.createdAt === 'string'
    );
}

5.3 状态管理进阶

Redux Toolkit示例：

// store/todoSlice.js
import { createSlice } from '@reduxjs/toolkit';

const todoSlice = createSlice({
    name: 'todos',
    initialState: {
        items: [],
        filter: 'all',
        searchTerm: ''
    },
    reducers: {
        addTodo: (state, action) => {
            state.items.push({
                id: Date.now(),
                text: action.payload.text,
                category: action.payload.category,
                completed: false,
                createdAt: new Date().toISOString()
            });
        },
        toggleTodo: (state, action) => {
            const todo = state.items.find(item => item.id === action.payload);
            if (todo) {
                todo.completed = !todo.completed;
            }
        },
        deleteTodo: (state, action) => {
            state.items = state.items.filter(item => item.id !== action.payload);
        },
        setFilter: (state, action) => {
            state.filter = action.payload;
        },
        setSearchTerm: (state, action) => {
            state.searchTerm = action.payload;
        }
    }
});

export const { addTodo, toggleTodo, deleteTodo, setFilter, setSearchTerm } = todoSlice.actions;
export default todoSlice.reducer;

5.4 前端测试

E2E测试示例（Cypress）：

// cypress/e2e/todo.cy.js
describe('Todo应用测试', () => {
    beforeEach(() => {
        cy.visit('/');
    });
    
    test('添加新任务', () => {
        cy.get('input[placeholder="输入新任务..."]').type('学习Cypress');
        cy.get('select').select('study');
        cy.get('button').contains('添加任务').click();
        
        cy.get('.todo-item').should('have.length', 1);
        cy.get('.todo-item').contains('学习Cypress');
    });
    
    test('标记任务完成', () => {
        // 先添加一个任务
        cy.get('input[placeholder="输入新任务..."]').type('测试任务');
        cy.get('button').contains('添加任务').click();
        
        // 标记完成
        cy.get('.toggle-btn').first().click();
        cy.get('.todo-item').first().should('have.class', 'completed');
    });
    
    test('删除任务', () => {
        // 先添加一个任务
        cy.get('input[placeholder="输入新任务..."]').type('要删除的任务');
        cy.get('button').contains('添加任务').click();
        
        // 删除任务
        cy.get('.delete-btn').first().click();
        cy.get('.todo-item').should('have.length', 0);
    });
});