React + TypeScript + Vant + @craco/craco + Axios + React Router + Sass 项目创建指南

要创建一个 React + TypeScript + Vant + @craco/craco + Axios + React Router + Sass 的项目，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了 Node.js 和 npm，然后在终端中运行以下命令来创建一个新的 React 项目：

npx create-react-app my-app --template typescript

2. 进入项目目录：

cd my-app

3. 安装 Vant UI 库：

npm install vant

4. 安装 @craco/craco，用于自定义 Create React App 的配置：

npm install @craco/craco

5. 创建一个 craco.config.js 文件，用于配置 @craco/craco：

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('autoprefixer')(),
        require('postcss-px-to-viewport')({
          unitToConvert: 'px',
          viewportWidth: 375, // 设计稿宽度
          unitPrecision: 6,
          propList: ['*'],
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [/node_modules/],
        }),
      ],
    },
  },
};

6. 修改 package.json 中的 scripts，将启动命令修改为使用 @craco/craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

7. 安装 Axios 和 React Router：

npm install axios react-router-dom

8. 安装 node-sass 和 sass-loader，用于编译 Sass 文件：

npm install node-sass sass-loader

9. 修改 src/App.tsx，引入 Vant 的样式文件：

import 'vant/lib/index.css';

10. 现在你可以开始根据你的需求编写 React 组件，并使用 Vant、Axios 和 React Router 了。

以上就是创建 React + TypeScript + Vant + @craco/craco + Axios + React Router + Sass 项目的命令。请确保已经安装了相应的依赖，并按照步骤进行操作。