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

相关推荐
倾听醉梦语5 小时前
React/Vite/Next.js 前端开发工具 SpotPatch:点击页面元素精准定位 JSX/TSX 源码
javascript·react·ai编程·vite·next.js·前端开发工具
meilindehuzi_a9 小时前
WebGPU DeepSeek项目实战(二):用单例模式加载Tokenizer并转发下载进度
单例模式·typescript·react
小当家.1051 天前
深入理解 ReAct Agent:从原理到 Java 实战
java·react.js·agent·react·架构设计·agent设计
DsirNg1 天前
从一次“接口背刺”谈 React 防静默崩溃与防御性编程
react·hooks
DsirNg2 天前
深入理解 React Hooks 原理
react·原理·hooks
带娃的IT创业者2 天前
微软开源“AI Agents for Beginners”:一场面向初学者的智能体范式启蒙
人工智能·microsoft·微软·开源·react·ai智能体·初学者
赵大仁3 天前
浏览器端 RAG:Transformers.js + WebGPU 本地检索入门
前端·ai·react·webgpu·rag
小锋java12343 天前
【技术专题】Vue3 - 列表渲染
vue.js·vite
人间凡尔赛3 天前
React Compiler 1.0 正式落地:告别 useMemo / useCallback,2026 前端性能优化的新范式
前端·性能优化·react
赵大仁4 天前
生成式 UI 实战:用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui