基于 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 并强制属性页面，将重定向到登录页。