目录

一：下载环境

二：创建 Vite + React + TypeScript 项目

三： 安装依赖

三：启动项目

1. 配置都安装成功后的项目目录​编辑

2.启动命令(在当前项目下运行)

2.1运行成功后的页面

四：项目配置

1. package.json —— sctipts 配置

1.1 配置对应的.env文件(文件地址跟src同级)！！！必须配置了这个之后，sctipts才能生效​编辑

2. vite.config.ts配置

3.配置 TypeScript (tsconfig.json)

---

前言：从0到1搭建一个react项目，采用当前最新的项目结构

项目环境：react、vite 、 ts、 pnpm

tips:为了更好的管理和操作node版本，可以安装nvm(NVM安装教程)

可根据自己的需要选择对应的包管理工具(npm 、yarn 、pnpm)

npm
优点：Node.js 内置、生态最完善、兼容性最好
缺点：安装速度较慢、磁盘占用大

yarn
优点：稳定性好、缓存机制优秀、workspaces 功能强大
缺点：性能略逊于 pnpm

pnpm
优点：磁盘空间节省、安装速度快、严格的 node_modules 结构
缺点：生态相对较新

一：下载环境（node版本地址https://nodejs.org/zh-cn/download）

# 检查 Node.js 版本
node -v

#如果node版本过低，先更新
nvm install xx.x.x

# 检查 pnpm 是否安装
pnpm -v

# 如果没有 pnpm，先安装
npm install -g pnpm

二：创建 Vite + React + TypeScript 项目

# 创建项目（my-react-app是名称，可自行修改）
pnpm create vite my-react-app --template react-ts

# 进入项目目录
cd my-react-app

# 安装基础依赖
pnpm install

三： 安装依赖

# Less 支持
pnpm add -D less

#ui 组件（我用的antd，你可以换成自己需要的）
pnpm install antd --save

三：启动项目

1. 配置都安装成功后的项目目录

2.启动命令(在当前项目下运行)

# 安装所有依赖
pnpm install

# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run preview

2.1运行成功后的页面

四：项目配置

1. package.json —— sctipts 配置

"scripts": {
    "dev": "vite",
    "test": "vite --mode test",
    "prod": "vite --mode prod",
    "build": "tsc -b && vite build --mode prod",
    "build:test": "vite build --mode test",
    "preview": "vite preview --mode prod",
    "preview:test": "vite preview --mode test",
    "lint": "eslint ."
},


配置对应的.env文件
.env.local   开发环境
.env.test    测试环境（后缀的名称test，对应 --mode test）
.env.prod    生产环境（后缀的名称prod，对应 --mode prod）


配置成功后对应的操作命令：

运行（开发环境）：pnpm run dev      对应这行（"dev": "vite",）
运行（测试环境）：pnpm run test     对应这行（"test": "vite --mode test",）
运行（生产环境）：pnpm run prod     对应这行（"prod": "vite --mode prod",）

注意：想要预览必须打包对应的 dist 文件，运行才有效果
预览（测试环境）：pnpm preview:test       对应这行（"build:test": "vite build --mode test",）
预览（生产环境）：pnpm preview            对应这行（"preview": "vite preview --mode prod",）

打包（测试环境）：pnpm run build:test 对应这行（"build:test": "vite build --mode test",）
打包（生产环境）：pnpm run build      对应这行（"build": "tsc -b && vite build --mode prod",）

1.1 配置对应的.env文件(文件地址跟src同级)
！！！必须配置了这个之后，sctipts才能生效

2. vite.config.ts配置

如果需要px转rem，就引入postcss-pxtorem，不需要可省略

import { defineConfig, loadEnv } from "vite";
import { resolve } from "path";
import postcssPxtorem from "postcss-pxtorem"; // 导入 pxtorem 插件

export default defineConfig(({ mode }) => {
  // 加载当前模式（dev/test/prod）的环境变量
  const env = loadEnv(mode, "./");

  return {
    build: {
      target: "es2015", // 构建目标为 ES6（兼容性更好）
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"), // 允许通过@符号来表示 src目录
      },
    },
    define: {
      __APP_ENV__: JSON.stringify(env.VITE_API_URL), //请求地址url
    },
    server: {
      port: 3000, //服务器端口(可自行定义)
      open: true,
      proxy: {
        "/api": {
          target: env.VITE_API_URL, //跨域接口的地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true, // 启用 Less 内联 JS
          additionalData: `
            @import "@/style/theme.less"; //将样式注入全局(不需要可省略)
          `,
        },
      },
      postcss: {
        plugins: [
          // 开发和生产环境都启用 pxtorem(不需要可省略)
          postcssPxtorem({
            rootValue: 75, // 1rem = 75px
            propList: ["*"], // 所有属性都转换
            selectorBlackList: [],
            exclude: (file) => {
              return file.includes("node_modules") || file.includes("swiper"); //排除的文件,swiper会影响样式切换
            },
            unitPrecision: 2, //转换精度，保留2位小数
            replace: true, //是否替换原值，能减小最终生成的 CSS 文件大小
            mediaQuery: false, //避免媒体查询被转换
            minPixelValue: 1, // 最小转换值，小于1px不转换
          }),
        ],
      },
    },
  };
});

3.配置 TypeScript (tsconfig.json)

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx", // 确保 JSX 被正确处理
    "baseUrl": ".", 
    "paths": { // 如果有别名路径配置，可以放在这里
      "@/*": ["src/*"]
    },
    "types": ["vite/client", "@types/node"], // 添加 Node 类型
  },
  "include": ["src"], // 指定哪些文件需要被 TypeScript 编译，通常是项目的 src 目录
  "exclude": ["node_modules"] // 排除 node_modules 目录
}