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

相关推荐
止观止20 小时前
告别全局污染:深入理解 ES Modules 模块化与构建工具
javascript·webpack·vite·前端工程化·es modules
打小就很皮...1 天前
发送到飞书机器人的完整流程(拓展)
react·markdown·webhook·飞书机器人
zwjapple2 天前
React + Java 技术面试完整指南
java·开发语言·jvm·react
打小就很皮...2 天前
录音与阿里云ASR实时识别实现流程
阿里云·react·asr 实时录音识别·skils 配置
Hao_Harrision3 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | AutoTextEffect(自动打字机)
前端·typescript·react·tailwindcss·vite7
Hao_Harrision4 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DoubleClickHeart(双击爱心)
前端·typescript·react·tailwindcss·vite7
charlee445 天前
从后端获取数据传输到前端进行显示(cpp-httplib+Vditor+Handlebars)
vite·前后端分离·vditor·cpp-httplib·handlebars
梦6505 天前
基于Umi 框架(Ant Design Pro 底层框架)的动态路由权限控制实现方案
前端·react
imkaifan5 天前
vite的插件 legacy--兼容低版本的浏览器
vue3·vite
孤狼warrior6 天前
纯AI开发能做到什么地步 他心游 经典博客项目
react·ai编程