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

相关推荐
LYFlied1 天前
【一句话概述】Webpack、Vite、Rollup 核心区别
前端·webpack·node.js·rollup·vite·打包·一句话概述
彩旗工作室1 天前
Clerk 完全指南:现代 Web 应用的用户认证革命
react·next·用户认证·clerk
Irene19912 天前
CLI 与 Vite 创建项目对比(附:最优解 create-vue)
vue·vite·cli·项目创建
全栈前端老曹2 天前
【前端权限】 权限变更热更新
前端·javascript·vue·react·ui框架·权限系统·前端权限
Dragon Wu2 天前
TanStack Query(React Query) 使用总结
前端·react.js·前端框架·react
Airene3 天前
Vite 8 发布 beta 版本了,升级体验一下 Rolldown
前端·vite
Hao_Harrision4 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RandomChoicePicker(标签生成)
前端·typescript·react·vite7·tailwildcss
诸神缄默不语4 天前
用Vite创建Vue3前端项目
前端·vite·cue3
蜗牛攻城狮4 天前
Vite 环境变量配置详解及最佳实践
前端框架·vite·构建工具
Hao_Harrision4 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| FAQ Collapse(问题解答折叠面板)
前端·typescript·react·vite7·tailwildcss