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

相关推荐
engchina13 小时前
使用 Vite + React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南
css·react.js·ui·vite·tailwind·react 19·shadcn
minko2 天前
这给我干哪儿来了,这还是react-router吗
react.js·vite
程序员小续4 天前
React源码解读
前端·javascript·react.js·webpack·前端框架·node.js·react
cs_dn_Jie7 天前
uniapp + vite + 使用多个 ui 库
vue.js·ui·uni-app·vite
飞奔的龟龟9 天前
getDerivedStateFromProps 详解
react
Liigo11 天前
初次体验Tauri和Sycamore (2)
rust·react·tauri·webassembly·jsx·sycamore·dioxus
PBitW11 天前
vue3+vite+eslint|prettier+elementplus+国际化+axios封装+pinia
vue.js·vite·eslint·prettier·vue3+vite·eslint+prettier
程序猿000001号15 天前
Vite:现代前端开发的利器
前端·vite
漂流瓶jz1 个月前
谈一谈前端构建工具的本地代理配置(Webpack与Vite)
前端·webpack·node.js·vite·proxy·代理
Lysun0011 个月前
redux 结合 @reduxjs/toolkit 的使用
开发语言·前端·javascript·react·redux