使用vite创建一个react18项目

一、vite是什么?

vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。

  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

在这里插入图片描述

二、使用vite创建一个react18项目

  1. 执行指令。

    // npm
    npm create vite@latest
    

    使用 yarn 包管理器则执行以下指令:

    // yarn
    yarn create vite
    

    使用 pnpm 包管理器则执行以下指令:

    // pnpm
    pnpm create vite
    
  2. 输入项目名称。
    在这里插入图片描述

  3. 选择React项目模板,空格按钮确认。
    在这里插入图片描述

  4. 选择变种语言 TypeScript。
    在这里插入图片描述

  5. 进入项目目录,执行 npm install 安装 node_modules,完成后,输入指令 npm run dev 启动程序。
    在这里插入图片描述在这里插入图片描述

  6. 项目目录。
    在这里插入图片描述

三、使用react18技术栈(全家桶)中后台管理项目模板

相关推荐

  1. vite 创建 react 项目

    2024-04-03 09:52:01       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-03 09:52:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-03 09:52:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-03 09:52:01       87 阅读
  4. Python语言-面向对象

    2024-04-03 09:52:01       96 阅读

热门阅读

  1. 平台介绍-大屏组件

    2024-04-03 09:52:01       32 阅读
  2. Facebook推广常见问题解惑答疑

    2024-04-03 09:52:01       41 阅读
  3. SegmentAnything导出Onnx模型分割图片

    2024-04-03 09:52:01       41 阅读
  4. 120.单例模式(C++设计模式)

    2024-04-03 09:52:01       36 阅读
  5. 【Node】使用Node.js构建简单的静态页面生成器

    2024-04-03 09:52:01       36 阅读
  6. 工厂方法模式:灵活的创建对象实例

    2024-04-03 09:52:01       40 阅读
  7. WPF —— 关键帧动画

    2024-04-03 09:52:01       41 阅读
  8. Yolov5封装detect.py面向对象

    2024-04-03 09:52:01       32 阅读
  9. Rancher(v2.6.3)——Rancher部署Minio(单机版)

    2024-04-03 09:52:01       28 阅读
  10. STM32为什么不能跑Linux?

    2024-04-03 09:52:01       38 阅读
  11. 菜鸟笔记-Python函数-ones

    2024-04-03 09:52:01       45 阅读
  12. 14、Lua 模块与包

    2024-04-03 09:52:01       42 阅读