构建自己的物料解决方案——构建物料库，实现前端设计

01: 数据拦截简化数据获取流程

/**
* 响应拦截器：
* 服务端返回数据之后，前端 .then 之前被调用
*/
service.interceptors.response.use((response) => {
    const { success, message, data } = response.data
    if (success) {
        return data
    }
    // TODO： 业务请求错误
    return Promise.reject(new Error(message))
})

02: 业务组件：移动端navigationBar

03: 动态 rem 基准+修正 tailwind，完善移动端navigationBar

/**
* 动态指定 rem 基准値， 最大为 40px
* 根据用户的屏幕宽度，进行一些计算，把计算出来的值赋值给 html 根标签作为 fontsize 大小
*/
export const useREM = () => {
    //定义最大的 fontSize
    const MAX_FONT_SIZE = 40
    //监听 html 文档被解析完成的事件
    document.addEventListener('DOMContentLoaded', () =>
        //拿到 html 标签
        const html = document.querySelector('html')
        //计算 fontSize，根据屏幕宽度 / 10
        let fontSize = window.innerWidth / 10
        fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
        //赋值给 html
        html.style.fontSize = fontSize + 'px'
    })
}

修正 tailwindcss 字体大小：

        Font Size - TailwindCSS中文文档 | TailwindCSS中文网