当前位置：首页 > VUE

vue实现知乎界面

2026-02-22 10:12:42VUE

以下是基于 Vue 实现知乎风格界面的关键步骤和代码示例：

vue实现知乎界面

技术栈选择

Vue 3：使用 Composition API 实现组件逻辑
Vue Router：处理页面路由和导航
Pinia/Vuex：状态管理（如用户登录状态）
Element Plus/Ant Design Vue：可选 UI 组件库加速开发
SCSS/LESS：样式预处理

核心组件结构

<template>
  <div class="zhihu-layout">
    <header class="zhihu-header">
      <nav-bar />
    </header>
    <main class="zhihu-main">
      <router-view />
    </main>
    <footer class="zhihu-footer"></footer>
  </div>
</template>

导航栏实现

<!-- NavBar.vue -->
<template>
  <div class="nav-container">
    <router-link to="/" class="logo">知乎</router-link>
    <div class="search-box">
      <input type="text" placeholder="搜索知乎内容" />
    </div>
    <div class="user-actions">
      <button @click="showLogin">登录</button>
    </div>
  </div>
</template>

<style lang="scss">
.nav-container {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

  .logo {
    font-size: 24px;
    font-weight: bold;
    color: #0084ff;
    margin-right: 30px;
  }

  .search-box {
    flex: 1;
    max-width: 600px;

    input {
      width: 100%;
      padding: 8px 12px;
      border-radius: 4px;
      border: 1px solid #ebebeb;
    }
  }
}
</style>

首页内容区

<!-- Home.vue -->
<template>
  <div class="home-container">
    <div class="left-content">
      <question-list />
    </div>
    <div class="right-sidebar">
      <recommend-topics />
      <hot-questions />
    </div>
  </div>
</template>

<style lang="scss">
.home-container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;

  .left-content {
    flex: 1;
    margin-right: 20px;
  }

  .right-sidebar {
    width: 300px;
  }
}
</style>

问题列表组件

<!-- QuestionList.vue -->
<template>
  <div class="question-list">
    <div v-for="item in questions" :key="item.id" class="question-item">
      <h3>{{ item.title }}</h3>
      <div class="content">{{ item.content }}</div>
      <div class="actions">
        <span>赞同 {{ item.upvotes }}</span>
        <span>评论 {{ item.comments }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const questions = ref([
  {
    id: 1,
    title: '如何评价 Vue 3 的性能提升？',
    content: 'Vue 3 在性能方面做了哪些优化...',
    upvotes: 256,
    comments: 43
  }
])
</script>

响应式设计要点

@media (max-width: 768px) {
  .home-container {
    flex-direction: column;

    .left-content {
      margin-right: 0;
    }

    .right-sidebar {
      width: 100%;
    }
  }
}

状态管理示例（Pinia）

// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({
    isLogin: false,
    userInfo: null
  }),
  actions: {
    login(userData) {
      this.isLogin = true
      this.userInfo = userData
    }
  }
})