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

相关推荐
南望无一15 小时前
Vite拆包后Chunk级别的循环依赖分析及解决方案
前端·vite
Hao_Harrision1 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | StickyNavbar(粘性导航栏)
前端·typescript·react·tailwindcss·vite7
前端不太难1 天前
从一次点赞操作,看 RN 列表的渲染扩散路径
网络·react
前端不太难1 天前
从 Navigation State 反推架构腐化
前端·架构·react
前端不太难2 天前
Navigation State 与页面内存泄漏的隐性关系
前端·ui·react
weibkreuz2 天前
React开发者工具的下载及安装@4
前端·javascript·react
Tzarevich3 天前
现代前端开发工程化:从 Vite 到 Vue 3 多页面应用实战
vue.js·vite
韭菜炒大葱3 天前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
大模型教程.4 天前
收藏级教程:ReAct模式详解,让大模型从回答问题到解决问题
前端·人工智能·机器学习·前端框架·大模型·产品经理·react
阿里巴啦5 天前
用React+Three.js 做 3D Web版搭建三维交互场景:模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景