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

相关推荐
用户479492835691520 小时前
Vite 中 SVG 404 的幕后黑手:你真的懂静态资源处理吗?
前端·vite
草木红2 天前
vite 安装 vue3 和 tailwindcss
vue3·vite·tailwindcss
在未来等你2 天前
AI Agent设计模式 Day 19:Feedback-Loop模式:反馈循环与自我优化
设计模式·llm·react·ai agent·plan-and-execute
weixin79893765432...2 天前
Electron + React + Vite 实践
react.js·electron·vite
A3608_(韦煜粮)3 天前
深入理解React Hooks设计哲学与实现原理:从闭包陷阱到并发模式
javascript·性能优化·react·前端开发·react hooks·并发模式·自定义hooks
weixin79893765432...5 天前
Electron + Vue 3 + Vite 实践
vue.js·electron·vite
safestar20125 天前
React 性能优化之Fiber 架构深度解析:从堆栈调和到增量渲染的革命
前端·javascript·react
aiguangyuan7 天前
React 18 源码解读(一)
javascript·react·前端开发
AAA阿giao7 天前
使用 Vite + Vue 3 搭建项目并配置路由的全流程(含国内镜像加速)
vue.js·node.js·vite
笨笨狗吞噬者7 天前
【uniapp】小程序实现自由控制组件JSON文件配置
vue.js·微信小程序·vite