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

相关推荐
csj5010 小时前
前端基础之《React(6)—webpack简介-图片模块处理》
前端·react
!win !16 小时前
从一个按钮实例入门CSS in JS之styled-components
css·react
苏卫苏卫苏卫20 小时前
【码源】智能无人仓库管理系统(详细码源下~基于React+TypeScript+Vite):
前端·react.js·typescript·vite·项目设计·智能无人仓库管理系统·码源
明仔的阳光午后2 天前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
xixixin_2 天前
【React】节流会在react内失效??
开发语言·前端·javascript·react
csj503 天前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
前端赵哈哈5 天前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
csj505 天前
前端基础之《React(3)—webpack简介-集成JSX语法支持》
前端·react
念念不忘 必有回响5 天前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
csj507 天前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react