【Vue3.0实战逐步深入系列】为问卷系统重新布局并添加登录及注销功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。到目前为止我们的问卷调查已经实现了配置问卷，填写问卷，保存问卷，提交问卷，提交记录以及提交结果展示等基本功能。其实到这里关于问卷调查的一些相关功能基本都已经实现的差不多了。但是为了让我们的问卷调查更加完善，看起来更像是一个系统，同时也是为了进一步学习和巩固vue3.0的相关知识，我们继续对问卷调查进行扩展，今天要扩展的是：给我们的问卷调查重新布局并添加登录功能。

重新布局

• 新增HomePage.vue

在这之前，我们的问卷调查系统并没有进行注重布局这一块，打开之后就直接展示的是问卷填写页面，然后再通过顶部的两个超链接进行页面的切换，这样看上去既不美观也不专业，今天就给我们的系统进行一下重新布局：

• 添加一个HomePage.vue组件，在该组件中进行上下和左右布局，即：首先一个大盒子被拆分成上下两部分，然后再把下面的部分再拆分成左右两个部分，我们分别把它们命名为：主盒子main-box，头部盒子header-box，左侧盒子menu-box和右侧盒子content-box
• 在header-box中添加问卷系统的标题信息，以及登录后的用户信息（后面添加）
• 在menu-box中引入elementui库中的el-menu菜单组件，将之前的两个超链接改成菜单的形式展示在页面左侧
• 在menu-box中添加一个router-view用于显示问卷内容（问卷填写，问卷详情，提交记录等）
  页面的大致布局如下图所示：
  

下面给出给出HomePage.vue的布局代码，关于css样式大家可以自行补齐，或者有兴趣的小伙伴可以评论留言获取完整代码，样式部分就不在这里帖出了。另外关于el-menu的用法大家可以参考饿了么官网：

<template>
	<div class="main-box">
		<div class="header-box">
			<div class="header-title">
				<span>YANNIS 问 卷 调 查 管 理 系 统</span>
				<div class="user">
					<div>
						<!--预留：用于展示登录后的用户信息-->
					</div>
					<div>
						<!--预留按钮：用户登录后可以注销操作-->
					</div>
				</div>				
			</div>
		</div>
		<div class="menu-box">
			<el-menu active-text-color="#ffd04b" background-color="#4a5e71" class="el-menu-vertical-demo" text-color="#fff" router default-active="/" style="height:100%">
				<el-menu-item index="/">
					<el-icon><question-filled /></el-icon>
					<span>问卷调查</span>					
				</el-menu-item>
				<el-menu-item index="/list">
					<el-icon><list /></el-icon>
					<span>提交记录</span>					
				</el-menu-item>
			</el-menu>
		</div>
		<div class="content-box">
			<router-view />
		</div>
	</div>
</template>

import {
   ElMenu, ElMenuItem