VUE3套用组件库快速开发（以Element Plus为例）三

更新前端主页，使用v-for来创建条目

js 复制代码

<template>
  <div style="max-width: 1000px; margin: 0 auto;">
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="8">
        <el-statistic title="社区帖子总数" :value="posts.length" />
      </el-col>
    </el-row>

    <el-empty v-if="posts.length === 0" description="暂时没有帖子，快去发一个吧！" />
    
    <div v-else>
      <el-card 
        v-for="item in posts" 
        :key="item.id" 
        style="margin-bottom: 15px; cursor: pointer;"
        @click="viewDetail(item)"
      >
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <h3 style="margin: 0;">{{ item.title }}</h3>
          <el-tag :type="getTagType(item.tag)">{{ item.tag }}</el-tag>
        </div>
        
        <p style="color: #666; font-size: 14px; margin: 10px 0;">
          {{ item.summary }}
        </p>

        <div style="display: flex; align-items: center; font-size: 12px; color: #999;">
          <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="margin-right: 8px;" />
          <span>{{ item.author }}</span>
          <span style="margin-left: 20px;">发布于：{{ item.time }}</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 1. 定义模拟数据 (将来这些数据会从服务器 API 获取)
const posts = ref([
  {
    id: 1,
    title: 'Vue 3 + Element Plus 起步指南',
    summary: '今天开始学习前端，发现 Vue 3 的组合式 API 真的很好用...',
    tag: '前端',
    author: '小明',
    time: '2026-01-08'
  },
  {
    id: 2,
    title: '如何评价 2026 年的后端技术栈？',
    summary: '现在 Node.js 和 Go 依然是主流吗？大家怎么看？',
    tag: '后端',
    author: '技术大牛',
    time: '2026-01-07'
  },
  {
    id: 3,
    title: '社区求职板块正式上线啦！',
    summary: '欢迎各位 HR 和求职者在这里发布信息，共建友好社区。',
    tag: '公告',
    author: '管理员',
    time: '2026-01-01'
  }
])

// 2. 根据标签返回不同的颜色
const getTagType = (tag) => {
  if (tag === '前端') return 'success'
  if (tag === '后端') return 'warning'
  if (tag === '公告') return 'danger'
  return 'info'
}

// 3. 点击卡片的事件
const viewDetail = (item) => {
  ElMessage.info(`你点击了帖子：${item.title}，详情功能开发中...`)
}
</script>

9 页面为什么这么奇怪？

这个时候页面大概还是奇奇怪怪的，比如说一个是未能铺满整个页面，而成为了一个小卡片，背景都是黑色的，排版也是乱的。

原因很简单： Vue 的官方模板自带了一些基础 CSS 样式（比如居中对齐、深色模式适配、特定的边距），这些样式和 Element Plus 的布局撞车了，导致你的页面看起来像个"缩在中间的黑色小盒子"。

我们要做的就是：彻底清空这些干扰项，让页面回归"白板"状态。

找到 src/assets/main.css 文件，删除里面的全部内容（或者直接删除这个文件）。
找到 src/assets/base.css 文件，同样删除全部内容。
打开 src/main.js，检查有没有一句 import './assets/main.css'。如果有，删掉它。