Vue vs React

以下是一个同时支持 Vue 和 React 的前端实现方案，我将分别提供两个框架的实现思路和核心代码示例：

项目结构

blog-frontend/
├── vue-blog/         # Vue 版本
│   ├── src/
│   │   ├── components/
│   │   ├── views/
│   │   ├── router/
│   │   └── App.vue
├── react-blog/      # React 版本
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── router/
│   │   └── App.jsx
└── api/             # 公共API配置

公共功能需求

1. 文章列表展示
2. 文章详情页
3. 分类/标签筛选
4. 响应式布局
5. 文章评论功能
6. 搜索功能

技术选型

Vue 版本核心实现

1. 主页面组件 (App.vue)

<template>
  <div class="app-container">
    <header>
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    </header>
    <router-view />
  </div>
</template>

<script setup>
import { usePostsStore } from './stores/posts'

const postsStore = usePostsStore()

onMounted(() => {
  postsStore.fetchPosts()
})
</script>

2. 文章列表组件

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id" class="post-card">
      <h3>{{ post.title }}</h3>
      <p>{{ post.excerpt }}</p>
      <router-link :to="`/post/${post.id}`">Read More</router-link>
    </div>
  </div>
</template>

<script setup>
defineProps({
  posts: {
    type: Array,
    required: true
  }
})
</script>

React 版本核心实现

1. 主组件 (App.jsx)

import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { fetchPosts } from './features/posts/postsSlice'

function App() {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchPosts())
  }, [dispatch])

  return (
    <div className="app-container">
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
    </div>
  )
}

2. 文章列表组件

function PostList({ posts }) {
  return (
    <div className="post-list">
      {posts.map(post => (
        <div key={post.id} className="post-card">
          <h3>{post.title}</h3>
          <p>{post.excerpt}</p>
          <Link to={`/post/${post.id}`}>Read More</Link>
        </div>
      ))}
    </div>
  )
}

通用 API 配置

// api/client.js
import axios from 'axios'

export const blogApi = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

// 请求拦截器
blogApi.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
  return config
})

响应式设计实现（通用 CSS）

/* 公共样式 */
.post-list {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .post-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .post-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

运行步骤

1. 安装依赖

# Vue 项目
cd vue-blog
npm install

# React 项目
cd react-blog
npm install

2. 启动开发服务器

# Vue
npm run dev

# React
npm start

扩展建议

1. 添加 TypeScript 支持
2. 实现服务端渲染（Nuxt/Next.js）
3. 添加单元测试
4. 集成 Markdown 支持
5. 实现文章分类标签系统
6. 添加用户认证功能

如果需要更详细的实现细节或特定功能的实现方案，可以告诉我具体需求，我会提供更针对性的代码示例和架构建议。