使用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.mzph.cn/news/796689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

博客部署004-centos安装mysql及redis

1、如何查看当前centos版本? cat /etc/os-release 2、安装mysql 我的是centos8版本,使用dnf命令 2.1 CentOS 7/8: sudo yum install -y mysql-community-server 或者在CentOS 8上,使用DNF:🌟 sudo dnf install -y mysql-ser…

探秘MIMO技术:无线通信革命的多天线奇迹

单根发射天线和单根接收天线之间的信道容量受限于香农公式,要想在相同的频谱带宽下进一步提高信道容量,要采用多天线技术。 1. 什么是MIMO MIMO:Multiple-Input Multiple-Output,即多入多出系统。这里的入和出是相对于发射天线和…

力控机器人原理及力控制实现

力控机器人原理及力控制实现 力控机器人是一种能够感知力量并具有实时控制能力的机器人系统。它们可以在与人类进行精准协作和合作时,将力传感技术(Force Sensing Technology)和控制算法(Control Algorithm)结合起来&a…

Vue3_2024_7天【回顾上篇watch常见的后两种场景】

随笔:这年头工作不好找咯,大家有学历提升的赶快了,还有外出人多注意身体,没错我在深圳这边阳了,真的绝啊,最尴尬的还给朋友传染了!!! 之前三种的监听情况,监听…

LabVIEW太赫兹波扫描成像系统

LabVIEW太赫兹波扫描成像系统 随着科技的不断发展,太赫兹波成像技术因其非电离性、高穿透性和高分辨率等特点,在生物医学、材料质量无损检测以及公共安全等领域得到了广泛的应用。然而,在实际操作中,封闭性较高的信号采集软件限制…

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持: ◆ 主流大型数据库Oracle、SQLServer、MyS…

DC9 Debian和sql注入

信息收集 sudo arp-scan -l 列出局域网主机 arp-scan向局域网中所有可能的ip地址发出arp请求包,如果得到arp回应,就证明局域网中某台主机使用了该ip dc9的ip : 192.168.146.133 访问网页 cms为Debian 端口扫描 22端口是filtered 隐藏目…

详细分析Python爬虫中的xpath(附Demo)

目录 前言1. 基本知识2. 常用API3. 简易Demo 前言 关于爬虫的基本知识推荐阅读:Python爬虫从入门到应用(超全讲解) 该知识点需要提前安装相关依赖:pip install lxml 1. 基本知识 XPath(XML Path Language&#xf…

GIt 删除某个特定commit

目的 多次commit,想删掉中间的一个/一些commit 操作方法 一句话说明:利用rebase命令的d表示移除commit的功能,来移除特定的commit # 压缩这3次commit,head~3表示从最近1次commit开始,前3个commit git rebase -i head~3rebase…

机器学习每周挑战——信用卡申请用户数据分析

数据集的截图 # 字段 说明 # Ind_ID 客户ID # Gender 性别信息 # Car_owner 是否有车 # Propert_owner 是否有房产 # Children 子女数量 # Annual_income 年收入 # Type_Income 收入类型 # Education 教育程度 # Marital_status 婚姻状况 # Housing_type 居住…

使用GPT需要注意的事项

GPT出来之后,基本就告别浏览器搜索问题答案了。将问题原封不动的copy给GPT基本可以得到解答。 但是这个也有弊端,那就是太依赖GPT了。 1,使用GPT需要更强的专业知识:除了能问对问题,还要具备识别GPT&q…

拦截器抛出异常无法被全局异常处理器捕获问题

文章目录 基本说明问题描述问题原因解决方法前端执行的所有请求都通过Controller,而不是直接访问html定义一个/error路径的方法 总结 基本说明 我的前后端项目是放在一起的,前后端都是由springMVC进行控制,但是现在我在拦截器的preHandle方法…

蓝桥杯单元测试专项练习Java版(单元测试4)(修正版)

关于简单循环覆盖法可以看看这里我的上一个文章http://t.csdnimg.cn/k92fn\ 题目4链接:单元测试专项练习(JavaPython) - 第四题单元测试题目(Java) - 蓝桥云课 (lanqiao.cn) 目录 题目描述 源代码功能 原题: Datas.java Good…

自动驾驶_交通标志识别:各目标检测算法评测

自动驾驶|交通标志识别:各目标检测算法评测 论文题目:Evaluation of Deep Neural Networks for traffic sign detection systems 开源代码:https://github.com/aarcosg/traffic-sign-detection 附赠自动驾驶学习资料和量产经验:…

计算机视觉——基于傅里叶幅度谱文档倾斜度检测与校正

概述 在计算机视觉领域,处理文档数据时,OCR算法的性能往往会受到文档的倾斜度影响。如果文档在输入到模型之前没有经过恰当的校正,模型就无法期待模型能够提供准确的预测结果,或者模型预测的精度会降低。例如,在信息提…

助力蓝桥杯单片机省一————模块之超声波

距离蓝桥杯单片机省赛还有7天 本次介绍的模块是超声波模块,将使用定时器1和PCA进行距离的测量。如果对PCA还未了解的,可以打开官方给的芯片数据手册,自行查看。 一、超声波测量原理 二、产生8个40KHz的超声波 void Init_wave() {unsigned …

7 个 iMessage 恢复应用程序/软件可轻松恢复文本

由于误操作、iOS 升级中断、越狱失败、设备损坏等原因,您可能会丢失 iPhone/iPad 上的 iMessages。意外删除很大程度上增加了这种可能性。更糟糕的是,这种情况经常发生在 iDevice 缺乏备份的情况下。 (iPhone消息消失还占用空间?&…

实际项目中如何使用Git做分支管理

前言 Git是一种强大的分布式版本控制系统,在实际项目开发中使用Git进行分支管理是非常常见的做法,因为它可以帮助团队高效的协作和管理项目的不同版本,今天我们来讲讲在实际项目中最常用的Git分支管理策略Git Flow。 常见的Git分支管理策略…

【开源语音项目OpenVoice](一)——实操演示

目录 一、前菜 1、Python选择 2、pip源切换 3、ffmpeg配置问题 4、VSCode添加Jupyter扩展 二、配置虚拟环境 1、下载源码 方法一 直接下载源码压缩包 方法二 使用git 1)git加入鼠标右键 2)git clone源码 2、VSCode出场 1)创建pyth…

第二十五周代码(蓝桥杯查缺补漏)

2024/03/31 周日 填充 题目链接 【参考代码】 想用暴力&#xff0c;没过 //枚举&#xff0c;未出结果QAQ #include <bits/stdc.h> using namespace std; string s00 "00"; string s11 "11"; int ans 0; //m个问号&#xff0c;子串有2^m…