黑马头条：项目重点

项目采用：vant组件库

0. MarkdownPad 2 打开总是报语法错误，安装一个插件

1.字体图标 如果已经有准备好的，可以自己上传到 阿里图标库

1.1 阿里图标创建一个项目，点击上传图标上去
1.2 然后下载对应的图标 less 代码，复制到自己的项目中保存，并在main.js引入该文件，这样就可以正常使用了

2. vant组件库 要根据官方文档 全局引入，和引入 css

3. 移动端 rem适配

   3.1 使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） 然后在 main.js 中加载执行该模块

4. 封装的请求 ：包括响应拦截器

    1、安装 axios 
    2、创建 `src/utils/request.js`
     /**
     * 封装 axios 请求模块
     */
    import axios from "axios"
    import store from '@/store'
    import JSONbig from 'json-bigint'
    const request = axios.create({
      baseURL: "http://toutiao-app.itheima.net/", // 基础路径
      transformResponse: [function (data) {
        // transformResponse 允许自定义原始的响应数据（字符串）
        try {
          // 如果转换成功则返回转换的数据结果
          return JSONbig.parse(data);
        } catch (error) {
          // 如果转换失败，则包装为统一数据格式并返回
          return data
        }
      }],
    })
   
    // 添加请求拦截器
    request.interceptors.request.use(function (config) {
      const {
        user
      } = store.state
      // 在发送请求之前做些什么
      if (user && user.token) {
        config.headers.Authorization = `Bearer ${user.token}`
      }
      // console.log(config);
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
   
    // 响应拦截器
   
    export default request
   

5. 封装 本地存储：

    export const setItem = (key, value) => {
      if (typeof value === 'object') {
        value = JSON.stringify(value)
      }
      window.localStorage.setItem(key, value)
    }
   
    // 获取
    export const getItem = key => {
      const data = window.localStorage.getItem(key)
      try {
        return JSON.parse(data)
      } catch (error) {
        return data
      }
    }
    // 删除
    export const removeItem = key => {
      window.localStorage.removeItem(key)
    }
   

4.token 过期了怎么办？

• 让用户重新登录，用户体验太差了

• 使用 refresh_token 解决 token 过期