成果预览：

1 构建工具

构建工具抉择 vite ,它是一个基于原生 ES 模块的开发服务器，能显著晋升开发体验。
参考：https://cn.vitejs.dev/guide/

2 款式解决

  • 款式预处理器抉择 less
  • 重置原生款式
  • 抽离通用款式，比方 flex 布局、内外边距、鼠标款式等

3 应用 svg 图标

应用 vite-svg-loader 加载 svg 图标

// vite.config.tsimport 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 并强制属性页面，将重定向到登录页。