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

接上文，接下来配置第五步

改写app.vue

js 复制代码

<template>
  <div class="common-layout">
    <el-container>
      <el-header
        style="background-color: #409EFF; color: white; display: flex; align-items: center; justify-content: space-between;">
        <div style="font-weight: bold; font-size: 40px;">学习社区 2026</div>

        <el-menu mode="horizontal" background-color="#409EFF" text-color="#fff" active-text-color="#ffd04b" router
          :default-active="$route.path">
          <el-menu-item index="/">首页列表</el-menu-item>
          <el-menu-item index="/post">我要发帖</el-menu-item>
          <el-menu-item index="/about">关于</el-menu-item>
        </el-menu>
      </el-header>

      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>

<style>
/* 消除浏览器自带的 8px 外边距，让导航栏铺满 */
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>

在src/view/PostView.vue

js 复制代码

<template>
  <div style="max-width: 800px; margin: 0 auto;">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>发布新讨论帖</span>
        </div>
      </template>

      <el-form :model="postForm" label-position="top">
        <el-form-item label="帖子标题">
          <el-input v-model="postForm.title" placeholder="请输入吸引人的标题" />
        </el-form-item>

        <el-form-item label="所属板块">
          <el-radio-group v-model="postForm.tag">
            <el-radio-button label="前端" />
            <el-radio-button label="后端" />
            <el-radio-button label="求职" />
            <el-radio-button label="灌水" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="帖子正文">
          <el-input
            v-model="postForm.content"
            type="textarea"
            :rows="6"
            placeholder="请分享你的学习心得..."
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handlePublish">立即发布</el-button>
          <el-button>存为草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

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

// 使用 reactive 定义一组响应式数据
const postForm = reactive({
  title: '',
  tag: '前端',
  content: ''
})

const handlePublish = () => {
  // 简单的校验逻辑
  if (!postForm.title || !postForm.content) {
    ElMessage.warning('请填写完整内容再发布哦！')
    return
  }
  
  console.log('正在向后端发送数据...', postForm)
  ElMessage.success('发布成功！（数据已打印在控制台）')
}
</script>

更新router

js 复制代码

{
      path: '/post',
      name: 'post',
      // 这就是所谓的"懒加载"，只有点击时才加载 PostView 页面
      component: () => import('../views/PostView.vue')
    }

此时访问/post页面已经有了内容