基于 Vue3 + TS 的前端结构
效果预览：
1 构建工具
构建工具选择 vite ,它是一个基于原生 ES 模块的开发服务器，能显著提升开发体验。
参考：https://cn.vitejs.dev/guide/
2 样式处理
- 样式预处理器选择
less - 重置原生样式
- 抽离通用样式，比如
flex布局、内外边距、鼠标样式等
3 使用 svg 图标
使用 vite-svg-loader 加载 svg 图标
// vite.config.ts
import svgLoader from 'vite-svg-loader'
plugins: [vue(), vueJsx(),svgLoader()],
// 在组件中引入 svg 文件
import LogoIcon from '@/assets/assets-logo-bee.svg';
<component :is="LogoIcon" class="icon" />
4 请求封装
对 axios 做最简单的封装即可，主要包括：携带 token、请求前缀、默认 Content-Type 。
function createRequestFunction(service: AxiosInstance) {
return function <T>(config: AxiosRequestConfig): Promise<T> {
const configDefault = {
headers: {
Authorization: "Bearer " + getToken(),
"Content-Type": get(config, "headers.Content-Type", "application/json")
},
timeout: 5000,
baseURL: import.meta.env.VITE_BASE_API,
data: {}
}
return service(Object.assign(configDefault, config))
}
}
mock 数据：
使用 vite-plugin-mock 插件，mock 接口写在 mock 目录下
5 路由权限
通过在 beforeEach 钩子中判断是否存在 token，如果不存在则跳到登录页，存在则正常访问页面，当请求接口返回401则表明 token 已过期，此时清空 token 并强制属性页面，将重定向到登录页。