npm create vite@latest project-name --template react-ts
// 使用 pnpm 创建项目
// pnpm create vite@latest project-name --template react-ts

cd project-name

npm install

npm run dev

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

// src/index.css
// 需要在 src/index.css 中顶部导入 TailwindCSS 样式
@tailwind "tailwindcss";

npm install @types/node --save-dev

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

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

// tsconfig.json
// 或者 tsconfig.node.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
    readonly VITE_API_BASE_URL: string;
    readonly VITE_APP_TITLE: string;
    readonly VITE_MODE: 'development' | 'production';
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

// .env.development
VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_TITLE=GroKay (Dev)
VITE_MODE=development

// .env.production
VITE_API_BASE_URL=https://shop.lgk.com:3000/api
VITE_APP_TITLE=GroKay (Prod)
VITE_MODE=production

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const isProd = mode === 'production'
  return {
    base: isProd ? './' : '/', // 生产环境用相对路径，开发环境用根路径
    plugins: [
      react(),
      tailwindcss()
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  }
})

npm install axios

// src/utils/request.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建axios实例
const instance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在这里可以添加token等全局请求头
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 核心请求方法
function request(config: AxiosRequestConfig) {
  return instance(config);
}

// 扩展GET方法
request.get = function(url: string, config?: Omit<AxiosRequestConfig, 'url' | 'method'>) {
  return instance.get(url, config);
};

// 扩展POST方法
request.post = function(url: string, data?: any, config?: Omit<AxiosRequestConfig, 'url' | 'method' | 'data'>) {
  return instance.post(url, data, config);
};

// 扩展PUT方法
request.put = function(url: string, data?: any, config?: Omit<AxiosRequestConfig, 'url' | 'method' | 'data'>) {
  return instance.put(url, data, config);
};

// 扩展DELETE方法
request.delete = function(url: string, config?: Omit<AxiosRequestConfig, 'url' | 'method'>) {
  return instance.delete(url, config);
};

export default request;

npm run build