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

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

02: 业务组件：移动端navigationBar

<script setup>
import { isMobileTerminal } from '@/utils/flexible' 
import mobileNavigationVue from ' ./mobile/index.vue' 
import { getCategory } from '@/api/category'
import { ref } from 'vue'const categoryData = ref([])
const getCategoryData = async () => {const { categorys } = await getCategory()categoryData.value = categorys
} 
getCategoryData()
</script>

<script setup>
// vite 构建的项目中，我们可以直接使用 defineProps 方法
defineProps({data: {type: Array, required: true}
})
</script>

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

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

修正 tailwindcss 字体大小：

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