Vue+TypeScript 项目实战教学（六）：布局大结局——完美收官！

服务器端渲染，实战！不费吹灰之力，轻松搞定！

大家好，欢迎来到手摸手创建一个 Vue + Ts 项目系列文章的第六篇。在上一篇文章中，我们完成了页面的基本布局。在这一篇，我们将对基础布局进行完善，并最终完成布局部分的内容。

1. 引入 Element-Plus

我们先来引入一个UI组件库，Element-Plus。这个库可以帮助我们快速地构建出美观、易用的界面。

npm install element-plus@2.2.4 --save

安装完成后，在main.js中导入Element-Plus：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

然后在Vue实例中使用Element-Plus：

Vue.use(ElementPlus)

2. 完善头部布局

在头部布局中，我们添加一个导航栏和一个用户头像。

<template>
  <el-header>
    <div class="header-content">
      <div class="header-logo">
        <router-link to="/">
          <img src="logo.png" alt="Logo">
        </router-link>
      </div>
      <div class="header-nav">
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/contact">联系我们</router-link>
      </div>
      <div class="header-avatar">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar size="small" :src="avatarUrl"></el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

3. 完善侧边栏布局

在侧边栏布局中，我们添加一个菜单和一个功能列表。

<template>
  <el-aside>
    <div class="aside-content">
      <el-menu>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
        <el-menu-item index="/contact">联系我们</el-menu-item>
      </el-menu>
      <div class="aside-functions">
        <el-button type="primary">新增</el-button>
        <el-button type="success">编辑</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </div>
  </el-aside>
</template>

4. 完善内容区布局

在内容区布局中，我们添加一个面包屑导航和一个主要内容区域。

<template>
  <div class="content-wrapper">
    <div class="content-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>关于我们</el-breadcrumb-item>
        <el-breadcrumb-item>联系我们</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-body">
      <router-view></router-view>
    </div>
  </div>
</template>

5. 完善底部布局

在底部布局中，我们添加一个版权声明。

<template>
  <el-footer>
    <div class="footer-content">
      Copyright © 2023 All rights reserved.
    </div>
  </el-footer>
</template>

6. 总结

至此，我们已经完成了布局部分的内容。在下一篇中，我们将开始编写业务逻辑。希望大家能继续关注我们的系列文章，我们一起学习、一起成长。