Lab03 前端基础 #

实验目的 #

• 了解 Vue 框架的基本使用
• 熟悉 Vue CLI 的基础命令
• 掌握 Vue-Router、Vuex 与 Vue 的集成
• 掌握 ElementUI 的基础使用
• 掌握使用 Axios 发送网络请求的方法
• 熟悉 Vue 单页面组件的使用

资源链接 #

https://bhpan.buaa.edu.cn:443/link/2B8C3DF0CE32D21908D8007C843940A5

有效期限：2022-08-01 23:59

实验指南 #

1. 查看资源链接中Vue和CSS相关的内容
2. 完成实验作业并于 4.3 日晚 12 点前提交至 软院云平台

实验作业 #

根据作业.pdf中的作业要求完成作业，并将文档和演示视频打包提交到云平台上。

任务 1 #

使用 Vue CLI 创建一个自己的 Vue 项目，项目至少包含 Vue-Router 和 Vuex，其他依赖项可以自行决定要不要添加。

任务 2 #

在 views 中新建一个单页面组件，将其命名为Login.vue。注册路径为/login的路由(修改router/index.js)，并将Login.vue挂载到该路由下。在首页加入该页面的入口(如下图所示)。

router/index.js 的代码截图

任务 3 #

在 store/index.js 中注册名为 isLogin 的状态(初始为 false 即未登录)，用于判断用户是否登录。对该状态增加两个 mutation，名为 login 和 logout，分别用于登录和登出。

store/index.js 的代码截图

任务 4 #

在 Home 页面使用条件渲染，如果登录则显示下面状态 1，否则显示状态 2。在状态 2 时，点击上下的 login 都应该可以跳转。

状态1

状态2

Home 组件的代码截图

任务 5 #

Login 组件中的按钮应该使用 ElementUI 的按钮，在未登录时显示状态 1，在登录时显示状态 2。

登录按钮和未登录按钮展示需要使用 v-if 条件渲染，两者各绑定一个事件，分别对应触发 vuex 的 mutation（login 和 logout）。

状态1

状态2

Login 组件的代码截图

实验报告 #

按照要求完成实验文档和演示视频，可以简要阐明你的思路

提交方式 #

• 截止时间：2022/4/3 晚 12 点

• 提交方式： 软院云平台

• 提交内容：打包后的实验文档和演示视频，将其命名为：

  学号_姓名_第3次实验.zip