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

相关推荐
晓得迷路了9 小时前
栗子前端技术周刊第 119 期 - ViteLand 月度更新汇总、Angular 21.2、Bun v1.3.10...
前端·javascript·vite
天蓝色的鱼鱼5 天前
都2026年了还不会Vite插件开发?手写一个版本管理插件,5分钟包会!
前端·vite
codingWhat9 天前
前端组件库开发实践:从零到发布
前端·npm·vite
小岛前端10 天前
Cloudflare 掀桌子了,Next.js 迎来重大变化,尤雨溪都说酷!
前端·vite·next.js
Java陈序员12 天前
太香了!一款轻量级的 Elasticsearch 可视化管理工具!
vue.js·elasticsearch·vite
天蓝色的鱼鱼13 天前
Vite 8:从“混动”到“纯电”,构建性能提升10倍+
前端·vite
晔子yy15 天前
ReAct范式全流程详解
java·ai·react
Roc.Chang17 天前
Vite 启动报错:listen EACCES: permission denied 0.0.0.0:80 解决方案
linux·前端·vue·vite
问道飞鱼24 天前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
熊猫钓鱼>_>24 天前
【开源鸿蒙跨平台开发先锋训练营】Day20 React Native 鸿蒙开发全阶段大复盘:从零到一的跨越
react native·开源·react·harmonyos·鸿蒙·openharmony·native