当前位置: 首页 > news >正文

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

  • coreui-free-react-admin-template(vite): https://github.com/coreui/coreui-free-react-admin-template
  • coreui-free-react-admin-template(create-react-app): https://github.com/coreui/coreui-free-react-admin-template
http://www.lryc.cn/news/333220.html

相关文章:

  • 子集(迭代)(leetcode 78)
  • 汽车疲劳测试试验平台技术要求(北重厂家)
  • Redis -- 缓存雪崩问题
  • 【ARM 嵌入式 C 文件操作系列 20 -- 文件删除函数 remove 详细介绍】
  • LeetCode刷题之31.下一个排列
  • 【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(九)- 向量定点算术指令
  • 【Java网络编程】IP网络协议与TCP、UDP网络传输层协议
  • C# 分布式自增ID算法snowflake(雪花算法)
  • commonJS和esModule的应用
  • (十一)RabbitMQ及SpringAMQP
  • STM32 M3内核寄存器概念
  • SQL语句的编写
  • Lecture 1~3 About Filter
  • 配置vscode链接linux
  • 论文阅读——MVDiffusion
  • Linux中的网络命令深度解析与CentOS实践
  • nginx配置实例(反向代理)
  • Flutter 解决NestedScrollView与TabBar双列表滚动位置同步问题
  • 云计算存在的安全隐患
  • 黑翅鸢优化算法(BKA)-2024年SCI一区新算法-公式原理详解与性能测评 Matlab代码免费获取
  • sqlmap(四)案例
  • 【C++初阶】String在OJ中的使用(一):仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加
  • 【25考研】:四川大学计算机学院24届874考研考情分析
  • 【GPT-4 Turbo】、功能融合:OpenAI 首个开发者大会回顾
  • java-Stream原理及相关操作详解(filter、map、flatMap、peek、reduce、anyMatch等等)
  • 基于Springboot中小企业设备管理系统设计与实现(论文+源码)_kaic
  • ORACLE 12 C估算 用户历史上的CPU消耗
  • Zookeeper 简明使用教程
  • JS 利用 webcam访问摄像头 上传到服务器
  • 【微信小程序】【小程序样式加载不出来】