使用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.hqwc.cn/news/587947.html

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

相关文章

Python网络爬虫(一):HTML/CSS/JavaScript介绍

1 HTML语言 1.1 HTML简介 HTML指的是超文本标记语言:HyperText Markup Language,它不是一门编程语言,而是一种标记语言,即一套标记标签。HTML是纯文本类型的语言,使用HTML编写的网页文件也是标准的文本文件&#xff0c…

使用Java流API构建树形结构数据

简介: 在实际开发中,构建树状层次结构是常见需求,如组织架构、目录结构或菜单系统。本教案通过解析给定的Java代码,展示如何使用Java 8 Stream API将扁平化的菜单数据转换为具有层级关系的树形结构。 1. 核心类定义 - Menu Data…

01-​JVM学习记录-类加载器

一、类加载器子系统 1. 作用-运输工具(快递员) 负责从文件系统或者网络中加载Class文件(DNA元数据模板),Class文件开头有特定标识,魔术,咖啡杯壁(class文件存于本地硬盘&#xff0c…

【嵌入式系统开发】001嵌入式Linux基础技术

文章目录 0. 学习路线1. Linux入门概念1.1 Linux 与 Windows 的区别1.2 shell是什么1.3 PATH环境变量1.3.1 什么是环境变量1.3.2 添加PATH环境变量的三种方法 1.4 Ubuntu 的文件系统组织方式简介 2. Linux的常见指令2.1 Linux指令基本形制2.2 目录与文件操作命令2.3 权限与属性…

Prometheus+grafana环境搭建redis(docker+二进制两种方式安装)(四)

由于所有组件写一篇幅过长,所以每个组件分一篇方便查看,前三篇 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabbitmq(docker二进制两种方式安装)(二)-CSDN博客 Prometheusgrafana环境搭建m…

OpenHarmony实战:轻量级系统之文件子系统移植

utils部件可被各业务子系统及上层应用使用,依赖芯片文件系统实现,需要芯片平台提供文件打开、关闭、读写、获取大小等功能。 移植指导 OpenHarmony文件系统需要适配如下HAL层接口: 表1 文件打开或关闭 接口名描述HalFileOpen文件打开或创…

20240402—Qt如何通过动态属性设置按钮样式?

前言 正文 1、点击UI文件 2、选择Bool型或是QString 3、设置后这里出现动态属性 4、这qss文件中绑定该动态属性 QPushButton[PopBlueBtn"PopBlueBtn"]{background-color:#1050B7;color:#FFFFFF;font-size:20px;font-family:Source Han Sans CN;//思源黑体 CNbor…

【R】Error in library(foreach) : 不存在叫‘foreach’这个名字的程辑包

Error in library(foreach) : 不存在叫‘foreach’这个名字的程辑包 此外: Warning message: package ‘parallel’ is a base package, and should not be updated 解决方法 缺少名为 foreach 的包,使用install.packages("foreach")将名为foreach 的包…

最新AI工具系统ChatGPT网站运营源码SparkAi系统V6.0版本,GPTs应用、AI绘画、AI换脸、垫图混图、Suno-v3-AI音乐生成大模型全支持

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧。已支持GPT…

深入理解 Vue3 中使用 v-model技术实现双向数据绑定

引言 在 Vue3 中,v-model 是一个非常有用的指令,它提供了一种简洁的方式来实现组件之间的双向数据绑定。本文将深入探讨 Vue3 中的 v-model 技术,包括它的工作原理、使用场景以及如何在自定义组件中应用 v-model。 一、v-model 的工作原理 在…

深度学习理论基础(五)卷积神经网络CNN

目录 前述:卷积神经网络基础1.卷积网络流程2.卷积网络核心3.卷积下采样4.卷积上采样--转置卷积 一、卷积神经网络层1.卷积层(1)内部参数:卷积核权重(2)内部参数:偏置(3)外…

【Frida】【Android】09_爬虫之Socket

🛫 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…