使用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技术栈(全家桶)中后台管理项目模板

相关推荐
OEC小胖胖1 天前
13|React Server Components(RSC)在仓库中的落点与边界
前端·react.js·前端框架·react·开源库
OEC小胖胖1 天前
14|Hook 的实现视角:从 API 到 Fiber Update Queue 的连接点
前端·react.js·前端框架·react·开源库
zhengxianyi5152 天前
vite build 发布到nginx二级目录——将yudao-ui-go-view打包、部署到big目录下
vue.js·nginx·vite·前后端分离·打包·ruoyi-vue-pro优化·部署运维
Mast Sail2 天前
WebStrom+Vitesse+Vue3项目路径报错爆红问题
vue·vite·webstorm
全栈前端老曹2 天前
【前端】Hammer.js 快速上手入门教程
开发语言·前端·javascript·vue·react·移动端开发·hammer.js
华玥作者3 天前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
OEC小胖胖3 天前
09|DOM Renderer 的 Host 层:从 Fiber 到真实 DOM 的落地
前端·前端框架·react·开源库
kk晏然4 天前
TypeScript 错误类型检查,前端ts错误指南
前端·react native·typescript·react
OEC小胖胖4 天前
08|Commit 阶段:副作用如何被组织、执行与约束
前端·react.js·前端框架·react·开源库
Hao_Harrision6 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RangeSlider(范围滑块组件)
前端·typescript·react·tailwindcss·vite7