黑马头条从登陆页到个人中心页

一、登入注册页
创建组件并配置路由
创建 src/views/login/index.vue 并写入内容，然后在 src/router/index.js 中配置登录页的路由表，最后，访问 /login 查看是否能访问到登录页面。
布局结构
这里主要使用到的 Vant 组件：
NavBar 导航栏
Form 表单
Field 输入框
Button 按钮
布局样式
写样式的原则：将公共样式写到全局（src/styles/index.less），将局部样式写到组件内部。
实现基本登录功能
据接口要求绑定获取表单数据
在登录页面组件的实例选项 data 中添加 user 数据字段，在表单中使用 v-model 绑定对应数据，最后测试。
请求登录
创建 src/api/user.js 封装请求方法，给登录按钮注册点击事件，最后测试。
登录状态提示
Vant 中内置了Toast 轻提示组件，可以实现移动端常见的提示效果。
二、个人中心页
创建 tabbar 组件并配置路由
这里主要使用到的 Vant 组件：
Tabbar 标签栏
创建 src/views/layout/index.vue，然后将 layout 组件配置到一级路由。
分别创建首页、问答、视频、我的页面组件
将四个主页面配置为 tab-bar 的子路由，最后测试。
页面布局
未登录头部状态，已登录头部状态。
处理已登录和未登录的页面展示
未登录，展示登录按钮
已登录，展示登录用户信息
用户退出
给退出按钮注册点击事件
退出处理
展示登录用户信息
步骤：
封装接口
请求获取数据
模板绑定
在 api/user.js 中添加封装数据接口
在 views/my/index.vue 请求加载数据
模板绑定