React实战-Vite搭建React项目

概述

从2025年开始，CRA正式被废弃，React生产环境中更推荐使用Vite、Remix、Next。

本章节主要就Vite搭建React项目进行讲解。

搭建步骤

1.确保Nodejs环境

在终端输入如下命令来查看node环境，

node -v

如果使用的是nvm管理node版本，可以输入如下命令查看:

nvm ls

运行结果为

       v16.20.2
       v17.0.1
->     v18.20.4
       v20.18.0
       v22.12.0

其中箭头所指就是当前版本。

2.使用vite-cli工具

1.直接使用vite-cli工具创建项目

# npm 模板
npm create vite@latest

# yarn
yarn create vite@latest

# pnpm
pnpm create vite@latest

也可以在项目搭建好后切换,因为vite项目的依赖是搭建好后再下载的。

2.输入项目名称

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

# 输入项目名称
? Project name: › vite-project

3.选择项目框架，选择React

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

✔ Project name: … my-vite-app

# 选择项目框架
? Select a framework: › - Use arrow-keys. Return to submit.
  	Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

4.选择项目语言，一般选择typescript

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

✔ Project name: … my-vite-app
✔ Select a framework: › React
# 选择项目语言
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

5.完成后的结果为

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

✔ Project name: … my-vite-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /home/upsilon/workplace/my-vite-app...

Done. Now run:

  cd my-vite-app
  npm install
  npm run dev

3.进入项目安装依赖

和cra不同，Vite项目在搭建时没有下载依赖，所以需要进入项目下载依赖。

1.npm依赖

npm i

2.使用pnpm

# 如果没有安装pnpm可以运行
npm i -g pnpm

# 下载依赖
pnpm i

3.使用yarn

# 如果没有安装yarn
npm i -g yarn

# 下载依赖
yarn