黑马头条登录到个人中心页面

使用vue脚手架创建项目的基本框架，对框架进行修改，将不需要的内容删除。

创建style文件夹，然后在里面创建base.less文件，用于存放全局样式。

创建utils文件夹，用于存放一些项目需要的工具；

在main.js文件夹里引入vant组件库；

在postcssrc.js文件里引入rem适配；

在App.vue中设置路由出口；

完成上面部分后就正式开始做项目了：

登录页面：

在views文件夹中创建login页面（登录页面），然后在router里面配置登录页面的路由；

从vant组件库引入导航栏组件，根据项目的需求对导航栏的颜色及文字样式进行修改；

从vant组件库引入表单组件，将原先的username和password修改为mobile（手机号）和code（验证码），并在data里用创建info保存这两个数据，然后书写手机号和验证码的正则表达式；然后是修改表单里的登录按钮，修改按钮里的onSubmit事件；

在utils文件夹里创建request.js文件，里面写项目请求的基地址，然后创建api文件夹，在里面再创建user.js文件，里面写关于用户请求的请求地址，这里导入用户登录的地址；

在onSubmit事件里所有异步请求的方式导入api文件夹里的user.js文件里的登录请求地址，将登录的请求参数mobile（手机号）和code（验证码）传入请求地址，当请求成功后就得到用户的登录信息（token）；

在utils文件夹里创建token.js文件，对token进行本地存储，删除，获取的方法；

登录成功后调用token.js里的setoken方法将token保存到本地存储里，然后对登录按钮进行一些调整，加入登录状态loading，以及登录成功或者失败时的轻提示；

个人中心页面：

在创建个人中心页面时先创建layout文件夹，在layout文件里引入tabbar标签栏组件，修改组件为首页，视频，问答，我的四个标签，并设置路由出口，将跳转方式改为路由跳转，在router配置layout的路由，并将四个标签配置为它的子路由；

在我的标签栏路由为my页面，在这里写个人中心页面，首先将页面分为上中三个部分，上面写登录头像，名字，生日信息，中间部分写我的作品，我的收藏，阅读历史，下部分写编辑资料，小智同学，系统设置，退出登录；

上部分引入image图片组件，并且分为左右两部分，左边放头像，右边放名字和生日；

中间部分引入Grid宫格组件，并且修改宫格里的图标和文字，图标为引入的icon组件；

下部分引入cell单元格，修改文字并加入图标和箭头；

完成后回到登录页面，在onSubmit事件中登录成功后跳转为个人中心页面