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

跟着森老师学React Hooks(1)——使用Vite构建React项目

news 2025/6/23 10:20:53

    Vite是一款构建工具，对ts有很好的支持，最近也是在前端越来越流行。

    以往的React项目的初始化方式大多是通过脚手架create-react-app(本质是webpack)，其实比起Vite来构建，启动会慢一些。

    所以这次跟着B站的一个教程，使用Vite来构建一下React项目(Node版本16+，低了会有问题)。

     1.初始化一个node项目shop-cart。

       创建一个目录shop-cart，使用vscode打开，在目录下依次运行(用yarn 也行)

npm init -y
npm i vite -D

    2. 安装插件(vitejs针对react变量全局注入的插件)

npm i @vitejs/plugin-react -D

    3. 安装React核心依赖和axios，以及express

 npm i react react-dom react-router-dom axios express

    4.修改package.json的scripts为:

"scripts": {"dev": "vite","server": "nodemon ./server.js"},

   5. 根据如下文件结构去新建文件和文件夹(暂时忽略server.js，现在为空)

   6.文件细节

   vite.config.js:

import { defineConfig } from "vite";
import { resolve } from "path";import React from "@vitejs/plugin-react";export default defineConfig({plugins: [React()],resolve: {alias: [{find: "@",replacement: resolve(__dirname, "src"),},],},
});

   index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shop Cart</title>
</head>
<body><div id="root"></div><script type="module" src="./src/Main.jsx"></script>
</body>
</html>

   src/Main.jsx:

import { createRoot } from "react-dom/client";import App from "./App";const root = createRoot(document.querySelector("#root"));root.render(<App />);

    src/App.jsx:

export default function App() {return <div>Hello, React-Vite</div>;
}

  7.运行npm run dev，默认端口5173，浏览器localhost:5173访问:

至此成功

相关文章：

跟着森老师学React Hooks(1)——使用Vite构建React项目

Vite是一款构建工具&#xff0c;对ts有很好的支持&#xff0c;最近也是在前端越来越流行。 以往的React项目的初始化方式大多是通过脚手架create-react-app(本质是webpack)&#xff0c;其实比起Vite来构建&#xff0c;启动会慢一些。 所以这次跟着B站的一个教程&#xff0c;使用…...

编程日记 2023/11/9 6:31:54

强力解决使用node版本管理工具 NVM 出现的问题（找不到 node，或者找不到 npm）

强力解决使用node版本管理工具 NVM 出现的问题&#xff08;找不到 node&#xff0c;或者找不到 npm&#xff09; node与npm版本对应关系 nvm是好用的Nodejs版本管理工具&#xff0c; 通过它可以方便地在本地调换Node版本。 2020-05-28 Node当前长期稳定版12.17.0&#xff0c;…...

编程日记 2023/11/9 6:30:52

Docker指定容器使用内存

Docker指定容器使用内存 作者&#xff1a;铁乐与猫 如果是还没有生成的容器&#xff0c;你可以从指定镜像生成容器时特意加上 run -m 256m 或 --memory-swap512m来限制。 -m操作指定的是物理内存&#xff0c;还有虚拟交换分区默认也会生成同样的大小&#xff0c;而–memory-…...

编程日记 2023/11/9 6:27:42

做什么数据表格啊，要做就做数据可视化

是一堆数字更易懂&#xff0c;还是图表更易懂&#xff1f;很明显是图表&#xff0c;特别是数据可视化图表。数据可视化是一种将大量数据转化为视觉形式的过程&#xff0c;通过图形、图表、图像等方式呈现数据&#xff0c;以便更直观地理解和分析。 数据可视化更加生动、形象地…...

编程日记 2023/11/9 6:26:41

CSS特效003：太阳、地球、月球的旋转

GPT能够很好的应用到我们的代码开发中&#xff0c;能够提高开发速度。你可以利用其代码&#xff0c;做出一定的更改&#xff0c;然后实现效能。 css实战中&#xff0c;这种球体间的旋转&#xff0c;主要通过rotate()旋转函数来实现。实际上&#xff0c;蓝色的地球和黑色的月球…...

编程日记 2023/11/9 6:25:40

云计算的大模型之争，亚马逊云科技落后了？

文丨智能相对论 作者丨沈浪 “OpenAI使用了Azure的智能云服务”——在过去的半年&#xff0c;这几乎成为了微软智能云最好的广告词。 正所谓“水涨船高”&#xff0c;凭借OpenAI旗下的ChatGPT在全球范围内爆发&#xff0c;微软趁势拉了一波自家的云计算业务。2023年二季度&a…...

编程日记 2023/11/9 6:24:39

【form校验】3.0项目多层list嵌套

const { required, phoneOrMobile } CjmForm.rules; export default function detail() {const { query } getRouterInfo(location);const formRef useRef(null);const [crumbList, setCrumbList] useState([{url: "/wenling/Reviewer",name: "审核人员&quo…...

编程日记 2023/11/9 6:22:36

公共功能测试用例

1、UI测试 布局是否合理&#xff0c;输入框、按钮是否对齐 行列间距是否保持一致弹出窗口垂直居中对其界面的设计风格是否与UI的设计风格一致 系统是否使用统一风格的控件界面的文字是否简洁易懂&#xff0c;是否有错别字 兼容性测试&#xff1a;不同浏览器、版本、分辨率下&a…...

编程日记 2023/11/9 6:20:20

【电路笔记】-并联RLC电路分析

并联RLC电路分析 文章目录 并联RLC电路分析1、概述2、AC的行为3、替代配置3.1 带阻滤波器3.2 带通滤波器 4、总结 电子器件三个基本元件的串联行为已在我们之前的文章系列 RLC 电路分析中详细介绍。 在本文中&#xff0c;介绍了另一种称为并联 RLC 电路的关联。 在第一部分中&a…...

编程日记 2023/11/9 6:19:19

ros1 client

Client&#xff08;客户端&#xff09;&#xff1a;发布海龟生成请求 [类似Publisher] Serve&#xff08;服务端&#xff09;&#xff1a;海龟仿真器,接收请求 [类似于Subscriber] Service&#xff08;服务&#xff09;&#xff1a;生成海龟的具体内容&#xff0c;其中服务类型…...

编程日记 2023/11/9 6:18:03

射频功率放大器应用中GaN HEMT的表面电势模型

标题&#xff1a;A surface-potential based model for GaN HEMTs in RF power amplifier applications 来源&#xff1a;IEEE IEDM 2010 本文中的任何第一人称都为论文的直译 摘要&#xff1a;我们提出了第一个基于表面电位的射频GaN HEMTs紧凑模型&#xff0c;并将我们的工…...

编程日记 2023/11/9 6:17:01

CSP(Common Spatial Patterns)——EEG特征提取方法详解

基于CSP的运动想象 EEG 特征提取和可视化参考前文&#xff1a;https://blog.csdn.net/qq_43811536/article/details/134273470?spm1001.2014.3001.5501 目录 1. CSP是什么&#xff1f;1.1 CSP的含义1.2 CSP算法1.3 CSP特征的特点 2. CSP特征在EEG信号分类任务中的应用2.1 任务…...

编程日记 2023/11/9 6:15:59

【Git】Git 学习笔记_操作本地仓库

1. 安装与初始化配置 1.1 安装 下载地址 在文件夹里右键点击 git bash here 即可打开命令行面板。 git -v // 查看版本1.2 配置 git config --global user.name "heo" git config --global user.email xxxgmail.com git config --global credential.helper stor…...

编程日记 2023/11/9 6:14:57

杂记(3)：在Pytorch中如何操作将数据集分为训练集和测试集？

在Pytorch中如何操作将数据集分为训练集和测试集&#xff1f; 0. 前言1. 手动切分2. train_test_split方法3. Pytorch自带方法4. 总结 0. 前言 数据集需要分为训练集和测试集&#xff01; 其中&#xff0c;训练集单纯用来训练&#xff0c;优化模型参数&#xff1b;测试集单纯用…...

编程日记 2023/11/9 6:13:55

【MySQL篇】数据库角色

前言 数据库角色是被命名的一组与数据库操作相关的权限&#xff0c;角色是权限的集合。因此&#xff0c;可以为一组具有相同权限的用户创建一个角色&#xff0c;使用角色来管理数据库权限可以简化授权的过程。 CREATE ROLE&#xff1a;创建一个角色 GRANT&#xff1a;给角色授…...

编程日记 2023/11/9 6:12:54

c++ 信奥赛编程 2050：【例5.20】字串包含

#include<iostream> #include<cstring> using namespace std; int main() {string str1,str2;int temp;cin>>str1>>str2;//判断长度 if(str1.size()<str2.size()){ swap(str1,str2); //交换内容 }str1str1str1; //AABCDAABCDAABCDAABCDif(str…...

编程日记 2023/11/9 6:11:48

用dbeaver创建一个enum类型，并讲述一部分，mysql的enum类型的知识

写这个博客的目的就是我在网上看了半天&#xff0c;发现没有这方面的知识&#xff0c;也许是老手认为这个太简单了&#xff0c;不过我还是告诉新人使用dbeaver来创建一个enum类型的方法&#xff1a; 就是enum("a","b","name") 第一步用dbeaver…...

编程日记 2023/11/9 6:09:40

Paste v4.1.2(Mac剪切板)

Paste for Mac是一款运行在Mac OS平台上的剪切板小工具&#xff0c;拥有华丽的界面效果&#xff0c;剪切板每一条记录可显示&#xff08;预览&#xff09;文本&#xff0c;图片等记录的完整内容&#xff0c;可以记录最近指定条数的剪切板信息&#xff0c;方便用户随时调用&…...

编程日记 2023/11/9 6:08:39

事件绑定-回调函数

1.事件的概念 2.小程序常用的事件集 2.1 bindtap 点击回调事件方法 2.1.1语法格式 2.1.2 事件处理中调用data 使用setDatacount&#xff1a;这种方式 直接使用this.data.count 2.1.3 事件处理中传参 错误示范&#xff1a; 传递方式&#xff1a;数值用{{}}&#xff0c;直接引…...

编程日记 2023/11/9 6:06:26

Makefile 总述

目录 一、Makefile 里有什么&#xff1f; 1、显式规则 2、隐晦规则 3、变量的定义 4、文件指示 5、注释 二、Makefile 的文件名 三、引用其它的 Makefile 四、环境变量 MAKEFILES 五、make 的工作方式 一、Makefile 里有什么&#xff1f; Makefile 里主要包含了五个东…...

编程日记 2023/11/9 6:05:25

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/6/20 23:14:20

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/6/21 16:36:57

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/6/21 3:16:21

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/6/17 2:00:03

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/6/19 16:22:06

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/6/22 5:30:37

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/6/22 13:19:47

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/6/15 23:04:57

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/6/16 13:23:09

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2025/6/22 8:22:31