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

相关推荐
今日无bug1 小时前
从0到1手撕流式输出:Vue3 + Vite 实现 LLM 流式响应全解析
前端·vue.js·vite
天道kabuto2 小时前
Vite 项目报错 @rollup/rollup-win32-x64-msvc 的解决与版本锁定
vite
天道kabuto4 小时前
Webpack 迁 Vite 踩坑记:一个让人抓狂的 Sourcemap 报错怎么破?
webpack·vite
LayZhangStrive11 小时前
Agent开发 - 实现人类与Manus智能体的终端窗口命令交互
ai·交互·agent·react·终端·manus
名字还没想好☜2 天前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
PBitW4 天前
为什么vite中TS报错,可以继续运行?Webpack不行?
前端·webpack·typescript·vite
ZGG0036 天前
真题拆解 05:ReAct 还是 Plan-and-Execute——规划范式怎么选
python·agent·react
eokred8 天前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react
深念Y9 天前
07-SSR水合问题实战排查与修复记录
前端·vue·vite·nuxt·ssr·csr·水合
进哥AI研习社10 天前
构建工具链深度配置——Vite/SWC 与 Tree Shaking 调优
rollup·vite·构建工具·swc·代码分割·esbuild·tree shaking