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

相关推荐
静待雨落1 天前
vite如何配置https
vite
井柏然1 天前
为什么打 npm 包时要将 Vue/React 进行 external 处理?
javascript·vite·前端工程化
千码君20162 天前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
星光不问赶路人3 天前
一文搞清楚 TypeScript 中 triple-slash 与 tsconfig.types 有何区别?
typescript·vite
前端OnTheRun5 天前
React18学习笔记(四) 路由案例--记账本
react·router
PanZonghui5 天前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
whltaoin7 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
星光不问赶路人9 天前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
tuuuuuun11 天前
Stomp 订阅模块化
websocket·vite
千码君201612 天前
React Native:使用vite创建react项目并熟悉react语法
javascript·css·react native·react.js·html·vite·jsx