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

相关推荐
豹哥学前端13 小时前
前端工程化实战:从包管理到 Vite 配置,一套下来全明白
前端·javascript·vite
架构源启1 天前
Spring AI 进阶系列- Agent 智能体开发:ReAct模式、多步推理与自主Agent实战
人工智能·spring·react·ai agent·智能体·springai
小牛itbull1 天前
ReactPress 3.0 :一分钟拥有自己的 CMS & 博客
开源·cms·react·博客系统·reactpress
天渺工作室3 天前
构建完自动打包压缩,一个插件搞定 Vite / Webpack / Rollup / ESBuild
webpack·vite·rollup.js
Hello--_--World4 天前
Vite:什么是bundleless?哪些要打包,哪些不要打包?依赖预构建是什么?依赖预构建如何减少网络请求的?esbuild 又是什么?
前端·javascript·webpack·vite
VillenK5 天前
版本依赖问题:vite-plugin-dts@3.1.0 与 jiti 的兼容性
前端·typescript·vite
轻口味5 天前
AI 时代全栈开发破局:TypeScript 生态实战,从入门到部署一站式通关
前端·mongodb·docker·ai·typescript·react·next.js
Paraverse_徐志斌5 天前
【AI Agent】常用架构模式:ReAct、Plan-and-Execute、Reflection
人工智能·ai·架构·llm·agent·react
ai超级个体7 天前
前端唯一的护城河?结合 AI 将字节组件库 Headless 化后的感想~
前端·react·ai编程·ant design·组件库·vibe coding
白鳯8 天前
塔罗神谕:星月神域莱诺薇为您占卜
react·web·three.js·codex·deepseek·vibe coding·塔罗占卜