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

相关推荐
奔跑的呱呱牛2 小时前
viewer-utils 图片预览工具库
javascript·vue·react
HetFrame4 小时前
一种纯前端实现 Markdown 内容即时分享的思路
html·react·链接·markdown·工具
小浣熊喜欢揍臭臭6 小时前
qiankun微服务搭建之【react+nextJs】
微服务·react
weixin_4255437315 小时前
TRAE CN3.3.25 构建的Electron简易DEMO应用
前端·typescript·electron·vite·nestjs
gentle coder2 天前
【langchain】agent部署的基础入门代码(持续更新中~)
python·langchain·react
RichardLau_Cx3 天前
【保姆级实操】MediaPipe SDK/API 前端项目接入指南(Web版,可直接复制代码)
前端·vue·react·webassembly·mediapipe·手部追踪·前端计算机视觉
敲敲了个代码3 天前
从N倍人力到1次修改:Vite Plugin Modular 如何拯救多产品前端维护困境
前端·javascript·面试·职场和发展·typescript·vite
小小工匠3 天前
大模型开发 - 零手写 AI Agent:深入理解 ReAct 模式与 Java 实现
人工智能·react
雪域迷影4 天前
MacOS中运行Next.js项目注册新用户时MongoDB报错MongoServerError
mongodb·macos·react·next.js
打小就很皮...4 天前
React 19 + Vite 6 + SWC 构建优化实践
前端·react.js·vite·swc