电商项目Ts版本

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、环境安装

1.1 配置@作为导入

1. vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

2. tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

1.2 文件目录

二、路由

2.1 publicRoutes

1. 用于控制公共网页的路由 publicRoutes.tsx

import { RouteObject } from "react-router-dom";
import { lazy, Suspense } from "react";

const Login = lazy(() => import("@/view/auth/Login"));
const Register = lazy(() => import("@/view/auth/Register"));

const publicRoutes: RouteObject[] = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/register",
    element: <Register />,
  },
];

export default publicRoutes;

2. 将所有的Routes注册到Router.tsx里

import { RouteObject, useRoutes } from "react-router-dom";

type RouterProps = {
  allRoutes: RouteObject[];
};

export default function Router({ allRoutes }: RouterProps) {
  const routes = useRoutes([...allRoutes]);
  return routes;
}