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

相关推荐
渴望成为python大神的前端小菜鸟1 天前
react 面试题
前端·react.js·前端框架·react·面试题
酒尘&2 天前
Hook学习-上篇
前端·学习·react.js·前端框架·react
人肉推土机2 天前
基于Claude Skills思想构建可拓展Plan ReAct Agent系统
langchain·react·mcp·claude skills·plan agent
临江仙4554 天前
Vite 性能优化实战:从 0 到 1 打造极速开发体验(附完整配置)
vue.js·vite
jason_renyu4 天前
Vite 与 Webpack:核心区别、优缺点、面试题及选型趋势
webpack·vite·模块联邦·webpack和vite区别
涔溪5 天前
Vite 和 Webpack 这两款主流前端构建工具的核心区别,包括它们的设计理念、工作机制和实际使用体验上的差异。
前端·webpack·vite
涔溪5 天前
Vite 是什么?
vite·前端构建工具
涔溪5 天前
深入了解 Vite 的核心特性 —— 开发服务器(Dev Server)和热更新(HMR)的底层工作机制
前端·vite
胡西风_foxww5 天前
Zustand 快速入门:5 分钟上手极简状态管理
react·zustand
im_AMBER6 天前
Canvas架构手记 07 状态管理 | 组件通信 | 控制反转
前端·笔记·学习·架构·前端框架·react