使用vite创建一个react18项目

一、vite是什么?

vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。

  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

二、使用vite创建一个react18项目

  1. 执行指令。

    js 复制代码
    // npm
    npm create vite@latest

    使用 yarn 包管理器则执行以下指令:

    js 复制代码
    // yarn
    yarn create vite

    使用 pnpm 包管理器则执行以下指令:

    js 复制代码
    // pnpm
    pnpm create vite
  2. 输入项目名称。

  3. 选择React项目模板,空格按钮确认。

  4. 选择变种语言 TypeScript。

  5. 进入项目目录,执行 npm install 安装 node_modules,完成后,输入指令 npm run dev 启动程序。

  6. 项目目录。

三、使用react18技术栈(全家桶)中后台管理项目模板

相关推荐
SamChan908 小时前
WebSocket实现PDF翻译进度实时推送:Go后端+React前端的完整方案
前端·websocket·pdf·c#·react·机器翻译
名字还没想好☜8 小时前
React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
前端·javascript·react.js·bug·react·next.js
名字还没想好☜1 天前
Next.js App Router 约定式文件实战:loading、error、not-found 怎么兜住加载态与异常
开发语言·前端·javascript·react·next.js
名字还没想好☜2 天前
React createPortal 实战:模态框逃出 overflow:hidden、事件冒泡与焦点管理
前端·javascript·react.js·ecmascript·react·createportal
PedroQue993 天前
Vite插件v1.1.0发布:自动导入全面重构
前端·vite
YFF菲菲兔4 天前
Environment API 总述
vite
至乐活着4 天前
Vite 构建工具原理解析与实战:从 ES Module 到极速 HMR
vite·热更新·构建工具·前端工程化·es module
人间凡尔赛4 天前
2026 前端全栈开发新范式:React Compiler + Signals + RSC 实战指南
前端·性能优化·react·全栈·signals·rsc
linsk19984 天前
React18、19如何兼容 IE9、IE10
react·rollup·vite·兼容·ie
李燚5 天前
ReAct Agent 源码拆解:Eino 如何把 Graph 变成 Agent(第64篇-E50)
ai·agent·react·graph·multi-agent·aiagent·eino