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