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

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

news 2025/9/21 16:03: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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/12 23:55:04

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/9/20 22:28:14

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/9/21 5:09:42

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/9/11 12:55:06

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/9/12 22:51:17

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/9/16 11:00:23

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/9/13 17:42:18

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/7/9 6:12:46