使用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…

golang defer实现

derfer : 延迟调用,函数结束返回时执行,多个defer按照先进后出的顺序调用 原理:底层通过链表实现,每次新增的defer调用,通过头插法插入链表;defer执行时,从链表头开始遍历,相当于实…

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

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

Springboot注解知识-文字描述(学习笔记)

目录 一、Springboot相关注解1.前后端交互相关注解1.Controller1.1RestController 2.RequestMapping("/hello")3.RequestParam(name "username")4.DateTimeFormat( pattern"yyyy-MM-dd HH:mm:ss" )5.RequestBody6.PathVariable7.ResponesBody8.…

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…

Centos添加FTP用户指定解释器为/sbin/nologin导致FTP无法登录(530 Login incorrect)的问题

Centos vsftpd 配置时,添加FTP用户时为了禁止ssh登录、仅用于FTP登录而指定解释器为/sbin/nologin,但用该用户进行FTP登录时报错 530 Login incorrect. [rootlocalhost data]# useradd ftpuser03 -d /data/ftp/ftpuser03 -s /sbin/nologin [rootlocalho…

android aidl 注册回调对象

资料一: 首先说说什么叫回调函数? 在WINDOWS中,程序员想让系统DLL调用自己编写的一个方法,于是利用DLL当中回调函数(CALLBACK)的接口来编写程序,使它调用,这个就 称为回调。在调用接…

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…

ARM - 调试学

相关链接 ARM架构 – debug学习 - someone的文章 - 知乎 https://zhuanlan.zhihu.com/p/690722045

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

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

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

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

EmmyLuaDebugger介绍与源代码分析

EmmyLuaDebugger Github 地址: https://github.com/EmmyLua/EmmyLuaDebugger 用于调试 Lua 代码 EmmyLuaDebugger 工作方式 EmmyLuaDebugger 将自己做成 Lua 模块 emmy_coreLua 脚本启动时,加入类似以下代码,启动 emmy_core 的调试服务local dbg = require(emmy_core) db…

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

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