如何创建无模板代码的Vite React项目？

太懂这种每次新建项目都要手动清理一堆冗余模板的烦躁了！我之前也遇到过一模一样的问题——用npm create vite@latest生成React-Typescript项目时，总会带一堆示例CSS、组件和图片，每次都得删半天，而且交互式菜单里确实没找到直接生成极简项目的选项。不过别担心，有两个实用办法能解决这个问题：

方法一：快速清理默认模板（适合偶尔创建项目） #

先按正常流程生成项目，再用命令一键清理冗余内容，比手动删除高效多了：

1. 直接用命令创建React-Typescript项目（跳过交互式菜单）：

npm create vite@latest my-react-ts-app -- --template react-ts

2. 进入项目目录，删除不需要的文件：

cd my-react-ts-app && rm src/App.tsx src/index.css src/assets/react.svg

3. 修改src/main.tsx为最基础的启动代码：

import React from 'react'
import ReactDOM from 'react-dom/client'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <div>Ready to build your app!</div>
  </React.StrictMode>,
)

这样你就得到了一个完全干净的项目结构，没有任何多余的示例代码。

方法二：自定义本地极简模板（适合频繁创建项目） #

如果经常需要创建这类项目，不如自己做一个专属的极简模板，以后直接复用：

1. 创建一个新文件夹（比如react-ts-minimal-template），搭建最基础的项目结构：
   • 保留index.html（只需要里面的<div id="root"></div>）
   • 放入上面修改后的src/main.tsx
   • 复制之前项目里的tsconfig.json、vite.config.ts和package.json（去掉和示例相关的配置）
2. 以后每次新建项目时，直接调用这个本地模板：

npm create vite@latest my-new-app -- --template file:./path-to-your/react-ts-minimal-template

这样生成的项目就是你自定义的极简版本，完全不用再手动清理。

官方的默认模板之所以带示例内容，是为了让新手能快速看到React项目运行的效果，所以交互式菜单里没有提供“无模板”的选项，但用上面的方法就能轻松绕开这个问题啦。

备注：内容来源于stack exchange，提问作者Ismael J. Varela