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

相关推荐
Hao_Harrision20 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| ThreeDBackgroundBoxes(3D背景盒子组件)
前端·3d·typescript·react·tailwindcss·vite7
AI架构师易筋2 天前
ReAct(react_agent)从入门到严谨:并以 AIOps 离线 PoC 为例给出可落地方案
人工智能·react
OEC小胖胖3 天前
05|从 `SuspenseException` 到 `retryTimedOutBoundary`:Suspense 的 Ping 与 Retry 机制
前端·前端框架·react·开源库
coderjc6 天前
依赖预构建
vite
实习生小黄7 天前
vue3静态文件打包404解决方案
前端·vue.js·vite
Hao_Harrision7 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| AnimatedCountdown(倒计时组件)
前端·typescript·react·tailwindcss·vite7
Awu12278 天前
⚡全局自动化:我用Vite插件为所有CRUD组件一键添加指令
前端·vite·前端工程化
醉逍遥neo9 天前
react项目热更新问题
前端·react·热更新·umi·umi max
wetyuo9 天前
【随手记】uniapp + V3 使用TailwindCss3
uni-app·vue·css3·vite