day2

• 看vant官方文档
• 安装依赖 postcss-pxtorem (px转rem插件) -----lib-flexible(rem基准值转换px)引包
  安装完之后检查，html的font-size大小
  node中的path.sep用于获取操作系统路径分隔符

实现登录页面
注意：代码风格 ：npm run lint校验自动修复，也会提示

• 使用的vant组件实现登录页面
  封装axios拦截器
  utils/request.js
  interceptors复制
  代码举栗：

import axios from 'axios'
const request = axios.create({
    baseURL:'http://具体接口'
})
最后改名字、导出

封装接口api(文件夹)
1、引入封装的axios
代码举栗：

import request from '@/axios'
export const login = ({ mobile, code }) =>{//参数结构
      request({
    methods: '',
    url: '',
    data: {  //根据接口文档
    mobile,
    code
    }

在回到登录页面
1、数据驱动视图手，获取到手机号和验证码
2、引入接口，点击登录发送请求，获取接口数据
3、成功跳转到主页面home
4、把登录的状态存储到store里，代码举栗：

` store文件夹
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     // 初始化的时候从本地存储获取其用户信息(里面有token等内容)
      user: JSON.parse(window.localStorage.getItme('user'))
},
mutations: {
    setUser (state, user) {
    state.user = user
      // 持久化存储到本地存储，防止页面刷新状态丢失  
      window.localStorage.setItme('user', JSON.stringify('state.user'))
   }
 }
})

5、在login页面 把存储的信息放到login里 this.$store.commit('setUser', res.data.data)_
6、修改拦截器返回值 return response.data.data || response.data
如果响应结构对象中有data，则直接返回这个 data数据
如果响应结构对象中没有 data，则不做任何处理，直接原样返回这个数据
总结实现基本登录功能

• 封装 request 请求模块
  • 创建 axios 实例
  • 统一配置修改返回数据结构
• 封装 api 请求函数
• 请求登录
• 将token存储到 vuex 容器中，同时将token 放入本地存储防止刷新丢失
  7、表单验证 这里先简单的判断了它的长度并给提示xxxx为空