React + Ts + Vite + Antd 项目搭建

1、创建项目

npm create vite 项目名称

选择 react

选择 typescript

关闭严格模式

建议关闭严格模式，因为不能自动检测副作用，有意双重调用。将严格模式注释即可。

 2、配置sass

npm install sass

更换所有后缀css为sass

vite.config.ts中注册全局样式

// 配置Scss

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: `@import "./src/styles/sassConfig";`,

      },

    },

  },

3、配置路径别名 

安装path      npm i @types/node --save-dev 

在 vite.config.ts 中引入path，并声明快捷字符及其对应文件夹，这里以@表示src目录为例，代码如下：

import { resolve } from "path"

// 配置路径别名

  resolve: {

    alias: {

      "@": resolve(__dirname, "src"),

    },

  },

tsconfig.json，注意：这里的字符与目录一定要与vite.config.ts中的配置保持一致。 

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    // 路径别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 添加后，再次输入@后，编译器会读取src目录下的资源。

4、配置axios请求

（1）下载axios及类型声明文件

npm install axios @types/axios

（2）根据需求封装axios 

// 在项目中创建一个 axios.js 文件

import axios from 'axios';
const instance = axios.create({
    baseURL: 'http://api.example.com', // 你的 API 地址
    timeout: 5000, // 请求超时时间（毫秒）
    headers: {
        'Content-Type': 'application/json', // 设置请求头，根据实际情况修改
    }
});
// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么，比如添加 token 等
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data;
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

export default instance;

（3）解决跨域

在项目根目录下创建三个文件，分别对应全局环境、开发环境、生产环境。

vite.config.ts中配置跨域

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from "path"
export default defineConfig(({ mode }) => {
  const config = loadEnv(mode, "./")
  return {
    plugins: [react()],
    // 配置Scss
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/styles/sassConfig";`,
        },
      },
    },
    // 配置路径别名
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
    },
    // 配置跨域
    server: {
      port: 8888,
      host: "192.168.31.207",
      proxy: {
        "/api": {
          target: config.VITE_TARGET,  // 会自动判断当前环境，对应上述三个文件中的target
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    }
  }
})

5、配置Antd

安装：npm install antd --save

下载icon：npm install @ant-design/icons --save

国际化

下载完毕后，默认语言为英文，需要在main.ts中注入并配置antd

import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import "./index.scss"
// antd部分
import { ConfigProvider } from "antd"
import "dayjs/locale/zh-cn"
import zhCN from "antd/locale/zh_CN"

ReactDOM.createRoot(document.getElementById("root")!).render(
   <ConfigProvider locale={zhCN}>
     <App />
   </ConfigProvider>
)

6、配置路由

安装 npm i react-router-dom@6

（1）在src文件目录下创建router文件夹 

import type { RouteObject, } from 'react-router-dom';
import { Navigate } from "react-router-dom";
import { lazy } from 'react';

const Home = lazy(() => import('@/pages/Home'));
const NotFound = lazy(() => import('@/pages/NotFound'));//使用路由懒加载优化提升

const routes: RouteObject[] = [
    {
        path: "/",
        element: <Navigate to="/home" />,
    },
    {
        path: '/404',
        element: <NotFound />,
    },
    {
        path: '/home',
        element: <Home />,

        // children: [
        //     {
        //         index : true,
        //         element: <Home />
        //     },
        //     {
        //         path: "/about",
        //         element: <About />,
        //         children: [
        //             { index : true, element: <AboutIndex />},
        //             { path : "/about/:id", element :<AboutList />}
        //         ]
        //     },
        //     {
        //         path: "/bussiness",
        //         element: <Bussiness />,
        //     }
        // ]
    },
];

export default routes;

（2）在scr/App.tsx文件中加入

 
import React from 'react';
import './App.css';
import { useRoutes } from 'react-router';
import routes from './route';
 
function App() {
  return (
    <div className="App">
      {useRoutes(routes)}
    </div>
  );
}
 
export default App;

（3）在scr/main.tsx文件中配置路由模式

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
  <BrowserRouter>
      <App />
      </BrowserRouter>
  </React.StrictMode>
);