跳到主要内容

Web前端开发路径

从网页制作到现代前端工程

前端技术栈​

基础三件套
├── HTML (结构)
├── CSS (样式)
└── JavaScript (交互)

现代框架
├── React
├── Vue
└── Angular

构建工具
├── Webpack / Vite
├── npm / yarn
└── Babel / TypeScript

HTML基础​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">首页</a>
            <a href="/about">关于</a>
        </nav>
    </header>

    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个段落。</p>
        <button id="myBtn">点击我</button>
    </main>

    <footer>
        <p>&copy; 2024 版权所有</p>
    </footer>

    <script src="app.js"></script>
</body>
</html>

CSS基础​

/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Flexbox布局 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Grid布局 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* 动画 */
.button {
    transition: all 0.3s ease;
}

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

JavaScript交互​

// DOM操作
const button = document.getElementById('myBtn');
const list = document.querySelector('.list');

button.addEventListener('click', () => {
    alert('按钮被点击了！');
});

// 动态添加元素
function addItem(text) {
    const li = document.createElement('li');
    li.textContent = text;
    list.appendChild(li);
}

// Fetch API
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

// ES6+特性
const users = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 }
];

// 解构赋值
const [first, second] = users;
const { name, age } = first;

// 箭头函数与数组方法
const names = users.map(u => u.name);
const adults = users.filter(u => u.age >= 18);

现代框架：Vue入门​

// Vue 3组合式API
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+1</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

const count = ref(0)
const items = reactive([
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' }
])

const increment = () => {
  count.value++
}

const doubleCount = computed(() => count.value * 2)
</script>

学习路线图​

第1阶段：基础 (2-3个月)
├── HTML5语义化标签
├── CSS3布局与动画
├── JavaScript ES6+
└── 响应式设计

第2阶段：进阶 (2-3个月)
├── 选择一个框架 (Vue/React)
├── 状态管理
├── 路由
└── 组件化开发

第3阶段：工程化 (1-2个月)
├── TypeScript
├── 构建工具 (Vite)
├── 代码规范 (ESLint)
└── 单元测试

第4阶段：专业化 (持续)
├── 性能优化
├── SSR/SSG
├── 微前端
└── 移动端适配

本章小结​

  • HTML：网页结构与语义化
  • CSS：样式与布局
  • JavaScript：交互与逻辑
  • 框架：Vue/React提升效率

→ 继续阅读：36-Web后端开发路径