新峰商城项目总结

配置拦截器：

配置axios，创建一个request.js文件，引入axios,通过axios.create方法配置请求的公共地址baseUrl，超时事件timeout，请求拦截器，每个页面头部都会携带token值，这个项目的token跟正常的token不一样，它就是一个数字，不需要加Bearer协议

config.headers['token'] = localStorage.getItem('token') || ''

如果是断网的情况

if (!navigator.onLine) {

​        Dialog.alert({

​            title: '温馨提示',

​            message: '亲,好像出现了网络错误...',

​        }).then(() => {

​            return

​        })

​    }

在vue3中提示文字需要引入vant中的Toast,Dialog组件

响应拦截器：这个项目中响应成功的状态码为200，显示提示信息，否则提示错误的提示信息，状态码为416是无效token，弹出确定框，then是确定跳转到登录页面

注意：

这个项目是手机端的，所以尺寸要自适应，我们拿到的设计图一般都是750px,用 vite 创建项目，配置 postcss 需要使用 postcss.config.js，postcss-pxtorem 该插件可以自动帮你把px转换成rem 。默认值是37.5px=1rem

1.安装低版本插件 npm i [email protected] 。不要直接npm install postcss-pxtorem --save装是6.0.0版本的 写样式会直接报错 。

2.因为rem参考的是根html里的font-size字体大小，所以还需要安装下lib-flexible这个插件，动态往html里写入font-size,在main.js里导入import 'lib-flexible/flexible'

一.tabBar实现

我们需要创建一个新的页面，并且我会使用tabBar标签栏 来实现页面的布局，并且我会创建好四个页面 分别是首页，分类，购物车，我的页面。

并且这四个页面的路由我会以children的形式来创建好，并且我会使用to来实现页面的跳转，并且使用router-view来跳转到对应的页面上。

{
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "about" */ '../vi