npmstart.
开工台
开始一个项目

从 React + Vite
开始一个项目。

后台、工具、单页应用。从熟悉的组件开始,把界面做出来。

什么时候选它?

适合已经确定要构建客户端交互界面的项目。Vite 负责开发和构建,React 负责 UI;路由、数据请求与部署方式由你按需选择。它不会替你搭建服务端 API,也不自带服务端渲染。

先准备开发环境

先安装满足当前 Vite 要求的 Node.js 版本,具体版本以官方入门文档为准。

在新的项目父目录中打开终端,逐条运行命令。初始化向导出现问题时,以终端中的实际提示为准。

创建、安装、运行

下面使用 npm 与 TypeScript 模板。其他包管理器可以在首页生成器切换;Yarn 命令以支持 dlx 的现代版本为前提。

终端命令
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

跑起来之后,先改哪里?

打开 src/App.tsx(JavaScript 模式为 src/App.jsx),修改页面内容。需要页面路由时再引入路由库,不必在第一天安装所有依赖。

什么时候考虑其他方案?

需要服务端渲染、文件路由或同一个项目里的服务端功能时,可以先看看 Next.js。

看看另一个起点

命令之外,也把需求写清楚。

选择一个场景,把第一版范围与验收标准一起准备好。

生成项目开工包

官方资料

React + Vite 入门文档