使用vite创建一个react18项目

news2024/11/25 10:35:51

一、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.coloradmin.cn/o/1563621.html

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

相关文章

iOS苹果签名共享签名是什么以及如何获取?

哈喽,大家好呀,咕噜淼淼又来和大家见面啦,最近有很多朋友都来向我咨询共享签名iOS苹果IPA共享签名是什么,针对这个问题,淼淼来解答一下大家的疑惑并告诉大家iOS苹果ipa共享签名需要如何获取。 现在苹果签名在市场上的…

CSS(二)---【常见属性、复合属性使用】

零.前言 本篇文章主要阐述CSS常见属性、复合属性,更多前置知识请见作者其它文章: CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客 1.CSS属性 CSS的属性有上百个,但是我们并不需要全部学习,只要我们学习一部分…

二叉树 - 栈 - 计数 - leetcode 331. 验证二叉树的前序序列化 | 中等难度

题目 - 点击直达 leetcode 331. 验证二叉树的前序序列化 | 中等难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理方法1:栈方法2:计数 3. 时间复杂度 3. 代码实现方法1:栈方法2:计数 leetcode 331. 验证二…

通俗易懂的JMeter调试错误全集

一、前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题,但是无从下手,不知道从哪里开始找起,对于初学者而言这是一个非常头痛的事情。这里总结出以下方法。 二、通过查看运行日志调试问题 写好脚本后,可以先试…

HarmonyOS实战开发-为应用添加运行时权限

介绍 通过AbilityAccessCtrl动态向用户申请“允许不同设备间的数据交换”的权限,使用设备管理实例获取周边不可信设备列表。 说明: 查询周边不可信设备之前,请确保本设备与周边设备未进行配对。如果已配对,则恢复出厂设置之后重新…

税务知识竞赛活动方案

为了提高税务工作人员的业务技能和知识,现在全市范围开展税务知识竞赛,希望通过“以赛促学”,在税务系统掀起一场税务知识学习热潮。下面是本次竞赛的活动方案。 1、第一轮:争分夺秒。选择题或判断题,每位参赛选手按编…

LiDAR和Camera融合的BEV感知算法-BEVFusion

0. 简述 本次给大家讲解一篇非常经典的融合工作叫 BEVFusion,我们依旧从算法动机&开创性思路、主体结构、损失函数以及性能对比四个方面展开 BEVFusion 有两篇文章,本次主要讲解的是阿里和北大的:BEVFusion: A Simple and Robust LiDAR-…

Docker容器与虚拟化技术:OpenEuler 部署 Docker UI

目录 一、实验 1.环境 2.OpenEuler 部署 docker-compose-ui 2.OpenEuler 部署 docker ui 3.使用cpolar内网穿透 二、问题 1.docker run -w 的作用 一、实验 1.环境 (1)主机 表1 主机 系统架构版本IP备注LinuxopenEuler22.03 LTS SP2 192.168…

MQ

目录 MQ优点 异步 解耦 削峰填谷 mq的缺点 MQ常见的几种模式 Kafka、ActiveMQ、RabbitMQ、RocketMQ 区别 MQ优点 mq是一种常见的中间件,在项目中经常用到,它具有异步、解耦、削峰填谷的作用。 异步 比如下单流程,A服务—>B服务&a…

SiameseRPN原理详解(个人学习笔记)

参考资源: 视觉目标跟踪SiamRPNSiameseRPN详解CVPR2018视觉目标跟踪之 SiameseRPN 目录) 1. 模型架构1.1 Siamese Network1.2 RPN 2. 模型训练2.1 损失函数2.2 端到端训练2.3 正负样本选择 3. 跟踪阶段总结 SiamRPN是在SiamFC的基础上进行改进而得到的一…

FreeRTOS_day3:2024/4/2

1.总结任务调度算法之间的区别,重新实现一遍任务调度算法的代码。 (1)抢占式调度:高优先级任务可以打断低优先级任务,用于任务优先级不同的任务 (2)时间片轮转:相同优先级的任务,分配相同的时间片(一般为 1ms)&#x…

解决GNU Radio+USRP实现OFDM收发在接收端存在误码问题

文章目录 前言一、OFDM 收发流程1、OFDM 收端流程2、OFDM 收端流程 二、问题所在1、find_trigger_signal 函数解读2、general_work 函数3、问题所在 三、修改源码四、运行结果1、频谱2、传输数据测试 五、调试小技巧六、资源自取 前言 在使用 GNU Radio 时使用官方例程搭建 GN…

游戏引擎之高级动画技术

一、动画混合 当我们拥有各类动画素材(clips)时,要将它们融合起来成为一套完整的动画。 最经典的例子就是从走的动画自然的过渡到跑的动画。 1.1 线性插值 不同于上节课的LERP(同一个clip内不同pose之间)&#xff…

学习使用echats因xAxis值过多,可以滚动的柱状图解决方案

学习使用echats因xAxis值过多,可以滚动的柱状图解决方案 效果图柱状图代码关键代码 效果图 柱状图代码 function echarts() {// 基于准备好的dom,初始化echarts实例var myChart echarts.init(document.getElementById(echart4));let xaxisData [1, 2,…

HTML常用标签-最基础的标签

从本篇开始,我们围绕HTML原生标签开始,围绕整个前端三剑客进行,将进行一个大致的介绍和案例展示,没有啥技术含量,只是把学习前端的时候,案例全部展示出来,作为一个实时记录,或者说回…

Redis高可用(持久化)

目录 一、Redis高可用 1. Redis高可用概述 2. Redis高可用策略 二、Redis持久化 1. Redis持久化的功能 2. Redis持久化的两种方式 3. RDB持久化 3.1 触发条件 3.1.1 手动触发 3.1.2 自动触发 ① 配置方式 ②其他自动触发机制 3.2 执行流程 3.3 启动时加载 4. AOF…

jnpf3.6私有化部署

文件内容 project web > 特别说明:源码、JDK、MySQL、Redis等安装或存放路径禁止包含中文、空格、特殊字符等## 一 技术栈- 主框架:Spring Boot Spring Framework - 持久层框架:MyBatis-Plus - 数据库连接池:Alibaba Druid -…

商场促销--策略模式

1.1 商场收银软件 package com.lhx.design.pattern.test;import java.util.Scanner;public class Test {public static void main(String[] args){System.out.println("**********************************************"); System.out.println("《大话设计模式…

坦白局:PMP真的是智商税吗?

近些年报考PMP认证的学员越来越多,PMP全球持证人数已经突破百万了,据PMI统计,IT行业近50%人士都持有PMP证书,因此也有很多学员在思考,PMP持证人员这么多,PMP是不是都已经烂大街了?证书还有含金量…