电商项目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;
}