为毛要做个超轻？社区上不是很多启动模板？请看图

是不是很炫？但是对于启动一个新项目有什么用呢？拉取下来后还得删各种没用的文件和一些不必要的配置

包含通用基础配置的启动框架

1、路由配置

在modules中插入路由文件自动读取

import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";

const modules = import.meta.glob("./modules/**/*.ts", {
  eager: true,
  import: "default",
});
const routeModuleList: Array<RouteRecordRaw> = [];
Object.keys(modules).forEach((key) => {
  // @ts-ignore
  routeModuleList.push(...modules[key]);
});

// 存放动态路由
export const asyncRouterList: Array<RouteRecordRaw> = [...routeModuleList];

const routes = [
  {
    path: "/",
    name: "/",
    redirect: asyncRouterList[0].path,
  },
  ...asyncRouterList,
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/login/index.vue"),
  },
  {
    path: "/:catchAll(.*)*",
    name: "404",
    component: () => import("@/views/result/404.vue"),
  },
];

const router = createRouter({
  routes,
  history: createWebHistory(),
});

router.beforeEach((to, from, next) => {
  // TODO 各种操作
  next();
});

export default router;

Axios 配置

对返回的状态码进行异常提示，请求拦截器做了通用的Token注入操作、响应拦截器做了数据处理

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
// import { MessagePlugin, NotifyPlugin } from 'tdesign-vue-next';
import { getUserStore } from "@/store";
import { message, notification } from "ant-design-vue";

interface AxiosConfig extends AxiosRequestConfig {
  method?: "GET" | "POST" | "DELETE" | "PUT";
  url: string;
  params?: Record<string, any>;
  data?: Record<string, any>;
  config?: Record<string, string>;
}

const codeMessage: Record<number, string> = {
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队（异步任务）。",
  204: "删除数据成功。",
  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
  401: "用户没有权限（令牌、用户名、密码错误）。",
  403: "用户得到授权，但是访问是被禁止的。",
  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
  406: "请求的格式不可得。",
  410: "请求的资源被永久删除，且不会再得到的。",
  422: "当创建一个对象时，发生一个验证错误。",
  500: "服务器发生错误，请检查服务器。",
  502: "网关错误。",
  503: "服务不可用，服务器暂时过载或维护。",
  504: "网关超时。",
};

const notificationBox = (status: number, url: string, errorText: string) => {
  return notification.error({
    message: errorText,
    description: `请求错误 ${status}: ${url}`,
  });
};

// 请求错误
const requestInterceptorsError = (error: any) => Promise.reject(error);

// 响应数据
const responseInterceptors = (response: AxiosResponse) => {
  if (response && response.status === 200) {
    const { code } = response.data;
    if (code === -999) {
      message.info("登录过期, 即将跳转登录页面");
      const timer = setTimeout(() => {
        getUserStore().logout();
        clearTimeout(timer);
      }, 2000);
      return null;
    }
    return response.data;
  }
  return response.data;
};
// 响应错误
const responseInterceptorsError = (error: any) => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status } = response;
    const url = response.request.responseURL;

    if (response.status !== 400 && response.status !== 401) {
      notificationBox(status, url, errorText);
    }
    switch (status) {
      case 401:
        notificationBox(status, url, errorText);
        // TODO
        break;
      case 403:
        // TODO
        break;
      default:
        break;
    }
  } else {
    notification.error({
      message: "网络异常",
      description: "您的网络发生异常，无法连接服务器",
    });
  }
  return Promise.reject(error);
};
/** 不能token的接口 */
const noTokenList = ["/login"];

const createAxiosByInterceptors = (
  config?: AxiosRequestConfig
): AxiosInstance => {
  const instance = axios.create({
    // TODO
    baseURL: "/api",
    timeout: 60000,
    headers: {
      "Content-Type": "application/json",
    },
    ...config,
  });

  // 请求拦截器
  instance.interceptors.request.use((config) => {
    const { token } = getUserStore();
    // 如果有 token 强制带上 token
    if (token && config.url && !noTokenList.includes(config.url))
      config.headers.Authorization = token;
    return config;
  }, requestInterceptorsError);
  // 响应拦截器
  instance.interceptors.response.use(
    responseInterceptors,
    responseInterceptorsError
  );
  return instance;
};

const axiosRequest = <T>(axiosParams: AxiosConfig): Promise<T | null> => {
  const { method = "GET", url, params, data, config } = axiosParams;
  const request = createAxiosByInterceptors(axiosParams);

  switch (method) {
    case "GET":
      return request.get(url, { ...params, ...config });
    case "POST":
      return request.post(url, data, config);
    case "DELETE":
      return request.delete(url, { ...data, ...config });
    case "PUT":
      return request.put(url, { ...data, ...config });
    default:
      // 需要添加错误请求
      return Promise.resolve(null);
  }
};

export default axiosRequest;

Pinia状态管理配置

分模块处理用户信息和配置信息，可自加，具体看源码

layout布局

采用通用的左右分模式

layout组件非常支持自定义、自定性强可根据需求随意改动

通用登录页

看图

二次封装组件

组件代码全在components文件中可自行修改符合需求的组件

CombineTable

看图就知道有多方便使用了，这点代码就可以生成一个表单查询+表格

结语

这个框架很轻、几乎拿来就能开发了；

github:github.com/jesseice/an…

可以通过脚手架使用，输入npm create wyd_cli即可下载

框架还会继续优化！！！