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

vite 初始化react项目

news 来源：原创 2025/8/11 11:34:43

一. 初始化

npm create vite@latest

Project name 项目名，例如：todo-list
Select a framework 选：React
Select a variant 选：TypeScript

npm install   //安装依赖
npm run dev  //启动项目

这样一个简单的react项目就实现了。

二. 添加路由

npm install react-router-dom

修改main.tsx文件，使用BrowserRouter包裹

import React from 'react'
import App from './App.tsx'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
)

创建页面组件src/pages，创建页面。
例：src/pages/Home.tsx

export default function Home() {return (<div>Home</div>)
}

在App.tsx中引入页面，页面使用包裹，使用Link进行页面跳转

import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'function App() {return (<div className="p-4"><nav className="space-x-4"><Link to="/">🏠 Home</Link></nav><Routes><Route path="/" element={<Home />} /></Routes></div>)
}export default App

npm run dev 启动项目

三. 封装路由

为了更方便维护，可以直接将路由配置封装到专门的文件内。
创建路由组件src/router/index.tsx
index.tsx

import { createBrowserRouter } from 'react-router-dom'
import Home from '@/pages/Home'
import About from '@/pages/About'const router = createBrowserRouter([{path: '/',element: <Home />,},{path: '/about',element: <About />,},...
])export default router

我删除了app.tsx文件，直接在main.tsx中创建App渲染。

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "@/router";const App = () => {return <RouterProvider router={router} />;
};ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

npm run dev 启动项目

vite 初始化react项目

一. 初始化 npm create vitelatestProject name 项目名，例如：todo-listSelect a framework 选：ReactSelect a variant 选：TypeScript npm install //安装依赖 npm run dev //启动项目这样一个简单的react项目就实现了。二.…...

编程日记 2025/8/11 11:34:43

LeetCode 216.组合总和 III：回溯算法实现与剪枝优化

目录问题描述解决思路回溯法剪枝优化代码实现复杂度分析示例测试总结与扩展 1. 问题描述给定两个整数 k 和 n，要求找出所有满足以下条件的组合： 组合包含 k 个不同的数字。组合中数字的和等于 n。组合中的数字范围为 [1, 9]，且每个数字…...

编程日记 2025/8/11 11:31:02

【Bootstrap V4系列】学习入门教程之组件-下拉菜单（Dropdowns）高级用法

Bootstrap V4系列学习入门教程之组件-下拉菜单（Dropdowns）高级用法下拉菜单（Dropdowns）高级用法一、Directions 方向1.1 Dropup1.2 Dropright1.3 Dropleft 二、Menu items 菜单项2.1 Active 活动2.2 Disabled 禁用三、Menu co…...

编程日记 2025/8/11 11:34:01

xiaopiu原型设计工具笔记

文章目录有没有行组件是否支持根据图片生成原型呢? 其他官网做项目要用到原型设计，还是那句话，遇到的必须会用，走起。支持本地也支持线上。有没有行组件是这样，同一行有多个字段，如何弄的准确点呢? 目前只会弄…...

编程日记 2025/8/11 11:33:29

1 数据导出：Hive导入MySQL [hadoophadoop1 sqoop]$ bin/sqoop export \ > --connect jdbc:mysql://localhost/weather \ > --username root \ > --password 123456 \ > --table mean_temperature \ > --export-dir /user/hive/warehouse/mydb/mean…...

编程日记 2025/8/7 18:07:19

南邮计科电工电子实验第五次课与非门设计数字锁逻辑电路小测答案

第五次课测试题量: 16 满分: 100 一. 单选题（共10题，62.2分） 1. (单选题)下列哪个电路是基本的组合逻辑电路？ A. 触发器B. 计数器C. 半加器D. 积分器我的答案:C:半加器;正确答案:C:半加器; 6.2分知识点： 组合…...

编程日记 2025/8/11 11:31:01

基于PyQt5的报警器实现说明

基于PyQt5的报警器实现说明一、概述本程序是一个基于PyQt5框架实现的报警器控制程序，通过串口与外部设备进行通信，向设备发送特定的十六进制指令来实现报警器的不同功能。PyQt5是Python中用于创建图形用户界面（GUI）的强大工具…...

编程日记 2025/8/5 5:16:39

pyorch中tensor的理解与操作（一）

tensor 是PyTorch 中一个最基本的数据集合类型， 本文注意针对该结构类型，说明它的存储方式以及主要的操作方法。 tensor其实是一个多维数组（元素的数据类型需一致），类似于 NumPy 的 ndarrays，但可以在 GPU …...

编程日记 2025/8/11 11:34:02

用react实现一个简单的三页应用

下面是一个使用 React Router 的简单示例，演示了如何在 React 应用中实现页面之间的导航。 🛠️ 第一步：使用 Vite 创建项目 npm create vitelatest my-router-app -- --template react cd my-router-app npm install🚀 第二步&a…...

编程日记 2025/8/11 11:30:58

OCCT中的布尔运算

OCCT 中的布尔运算是其几何建模的核心功能之一，主要用于实体的合并、切割和相交操作。以下是详细介绍及经典示例程序： 一、OCCT布尔运算的核心类 OCCT 通过 BRepAlgoAPI 命名空间下的类实现布尔运算，主要包括： BRepAlgoAPI_Fus…...

编程日记 2025/8/11 11:32:21

SpringBoot的自动配置和起步依赖原理

关于Spring Boot的自动配置和起步依赖，我想结合最新的实现机制来展开说明。先说自动配置——这是Spring Boot最核心的"约定优于配置"思想的落地体现。举个例子，当我们创建一个新的Spring Boot项目时，只要在pom.xml里添加了spring-b…...

编程日记 2025/8/11 11:32:44

沃伦森电气高压动态无功补偿装置助力企业电能优化

在工业生产的复杂电能环境中，电能质量直接影响企业的生产效率和运营成本。XX光伏科技有限公司作为一家快速发展的制造企业，随着生产规模的不断扩大，其内部电网面临功率因数过低、电压波动频繁等问题，导致供电部门罚款增加、设备故…...

编程日记 2025/8/11 11:34:02

VUE——自定义指令

Vue自定义指令概述 Vue自定义指令可以封装一些 dom 操作，扩展额外功能。它们允许开发者直接对DOM元素进行低层次操作，自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。自定义指令语法自定义指令的常用钩子函数&am…...

编程日记 2025/8/11 5:44:46

Redis协议与异步方式

1.redis pipeline 通过一次发送多次请求命令，为了减少网络传输时间。注意：pipeline 不具备事务性。 2.redis 事务事务：用户定义一系列数据库操作，这些操作视为一个完整的逻辑处理工作单元，要么全部执行，…...

编程日记 2025/8/10 21:34:23

systemd vs crontab：Linux 自动化运行系统的全面对比

在 Linux 系统运维和开发中，任务调度与服务管理是不可或缺的一环。无论是定期备份、日志轮转，还是启动后台服务，自动化机制都能极大地提高系统的可靠性与效率。两种最常用的自动化工具是： crontab：传统的基于时间的任…...

编程日记 2025/8/11 11:30:59

Centos离线安装mysql、redis、nginx等工具缺乏层层依赖的解决方案

Centos离线安装mysql、redis、nginx等工具缺乏层层依赖的解决方案引困境yum-utils破局引前段时间，有个项目有边缘部署的需求，一台没有的外网的Centos系统服务器，需要先安装jdk，node，mysql，reids&#xf…...

编程日记 2025/8/11 11:34:03

观测云：安全、可信赖的监控观测云服务

引言近日，“TikTok 遭欧盟隐私监管机构调查并处以 5.3 亿欧元”一案，再次引发行业内对数据合规等话题的热议。据了解，仅 2023 年一年就产生了超过 20 亿美元的 GDPR 罚单。这凸显了在全球化背景下，企业在数据隐私保护方面所面临…...

编程日记 2025/8/11 11:34:04

el-table计算表头列宽，不换行显示

1、在utils.js中封装renderHeader方法 2、在el-table-column中引入： 3、页面展示：...

编程日记 2025/8/11 11:33:26

多智能体学习CAMEL-调用api

可选模型范围在ModelScope中的模型库中选择推理 API-Inference ，里面的模型都可以选择，我们可以体验到最新的使用DeepSeek-R1数据蒸馏出的Llama-70B模型。 1.2.2 使用API调用模型这里我们使用CAMEL中的ChatAgent模块来简单调用一下模型，…...

编程日记 2025/8/11 11:31:26

奥威BI：AI+BI深度融合，重塑智能AI数据分析新标杆

在数字化浪潮席卷全球的今天，企业正面临着前所未有的数据挑战与机遇。如何高效、精准地挖掘数据价值，已成为推动业务增长、提升竞争力的核心议题。奥威BI，作为智能AI数据分析领域的领军者，凭借其创新的AIBI融合模式，正…...

编程日记 2025/8/11 11:33:28

SM2Utils NoSuchMethodError: org.bouncycastle.math.ec.ECFieldElement$Fp.＜init

1，报错图示 2，报错原因： NoSuchMethodError 表示运行时找不到某个方法，通常是编译时依赖的库版本与运行时使用的库版本不一致。错误中的 ECFieldElement$Fp. 构造函数参数为 (BigInteger, BigInteger)，说明代码期望使…...

编程日记 2025/8/11 11:32:43

Spring Boot 中 MongoDB @DBRef注解适用什么场景？

在 Spring Boot 中使用 MongoDB 时，DBRef 注解提供了一种在不同集合（collections）的文档之间建立引用关系（类似于关系型数据库中的外键）的方式。它允许你将一个文档的引用存储在另一个文档中，并在查询时自动…...

编程日记 2025/8/11 11:31:27

PDF生成模块开发经验分享

在日常的项目开发中，PDF文档的生成是一个常见的需求。无论是用于申报单、审批结果通知书还是其他业务相关的文档输出，一个高效且灵活的PDF生成功能都是不可或缺的。本文将基于我使用Java（Spring Boot）和iText库开发PDF生成模块的经…...

编程日记 2025/8/11 11:32:42

Music AI Sandbox：打开你的创作新世界

AI 和音乐人的碰撞其实，Google 早在 2016 年就启动了一个叫 Magenta 的项目，目标是探索 AI 在音乐和艺术创作上的可能性。一路走来，他们和各种音乐人合作，终于在 2023 年整出了这个 Music AI Sandbox，并且通过 YouTub…...

编程日记 2025/8/8 20:19:10

RISC-V入门资料

以下是获取 RISC-V 相关资料的权威渠道和推荐资源，涵盖技术文档、开发工具、社区支持等： 1. 官方资料 RISC-V 国际基金会官网 https://riscv.org 核心文档：ISA 规范（包括基础指令集（RV32I/RV64I）、扩展指令…...

编程日记 2025/8/11 11:31:25

私服与外挂：刑事法律风险的深度剖析

首席数据官高鹏律师团队编著在当今数字化时代，网络游戏产业蓬勃发展，然而与之相伴的私服与外挂现象却屡禁不止，且其背后隐藏着严重的刑事法律风险。作为一名律师，有必要在此对私服与外挂相关的刑事问题进行深入解读，以…...

编程日记 2025/8/5 7:21:57

sherpa-ncnn：Endpointing（断句规则）

更多内容：XiaoJ的知识星球目录 1. Endpointing (端点)1.1 规则11.2 规则21.3 规则3 1. Endpointing (端点) 我们有三条端点检测规则。如果激活了其中任何一个，我们假设检测到终端节点。 . 1.1 规则1 规则 1 计算尾随静默的持续时间。如果大于用户指…...

编程日记 2025/8/10 18:35:20

谷云科技iPaaS技术实践：集成平台如何解决库存不准等问题

在当今竞争激烈的商业环境中，电商平台、仓库系统以及门店系统之间的数据不同步问题，如同一颗隐形的 “定时炸弹”，严重威胁着企业的生存与发展。尤其是在库存管理方面，订单系统显示商品已售出，但仓库却无货可发&#x…...

编程日记 2025/8/11 11:31:00

负载均衡算法解析（一）NGINX

文章目录 1. 核心数据结构：算法的基石1.1 负载均衡节点结构：定义服务器实体1.2 关键概念阐述：权重 (Weight) 2. NGINX加权轮询算法旨在解决的具体问题深度分析2.1 应对后端服务器间的负载不均衡问题2.2 后端服务健康状态的动态感知与自适应调…...

编程日记 2025/8/11 11:32:19

计算机网络笔记(十六)——3.3使用广播信道的数据链路层

3.3.1局域网的数据链路层一、核心逻辑架构（拓扑结构演变） 二、MAC层核心机制 MAC地址结构以太网帧格式 CSMA/CD工作机制流程三、关键功能对比表功能集线器(Hub)交换机(Switch)网桥(Bridge)工作层级物理层数据链路层数据链路层冲突域处理全广播&…...

编程日记 2025/8/11 11:32:19

STM32-模电

目录一、MOS管二、二极管三、IGBT 四、运算放大器五、推挽、开漏、上拉电阻一、MOS管 1. MOS简介这里以nmos管为例，注意箭头方向。G门极/栅极，D漏极，S源极。当给G通高电平时，灯泡点亮，给G通低电平时&a…...

编程日记 2025/8/11 11:32:18

单片机 + 图像处理芯片 + TFT彩屏指示灯控件

指示灯控件使用说明简介这是一个基于单片机 RA8889/RA6809图形处理芯片的指示灯的控件库，用于在TFT显示屏上显示各种状态的指示灯。该控件支持多种状态显示，包括正常、警告、错误和停止等状态，并支持自定义标签显示。功能特点支持多…...

编程日记 2025/8/11 11:32:46

73页最佳实践PPT《DeepSeek自学手册-从理论模型训练到实践模型应用》

这份文档是一份关于 DeepSeek 自学手册的详细指南，涵盖了 DeepSeek V3 和 R1 模型的架构、训练方法、性能表现以及使用技巧等内容。它介绍了 DeepSeek V3 作为强大的 MoE 语言模型在数学、代码等任务上的出色表现以及其训练过程中的创新架构如多头潜在注意力和多 To…...

编程日记 2025/8/11 11:30:59

Python自动化-python基础(上)

一.魔法方法在 Python 中，魔法方法（Magic Methods）是一类特殊的方法，以双下划线 __ 开头和结尾 ，它们在特定的场景下会被 Python 解释器自动调用，用于实现一些内置的操作行为。 1. 初始化与构造相关 __…...

编程日记 2025/8/11 11:32:45

mysql数据库体验

目录数据库简介使用数据库数据库的基本概念数据数据库和数据库表数据库管理系统和数据库系统数据库系统发展史经典数据库网状模型层次模型关系模型当今主流数据库介绍关系数据库非关系型库的基本概念关系数据库的基本结构主键与外键主键外…...

编程日记 2025/8/11 11:31:25

Python开发系统

以下是一个基于Python和OpenCV的简单图像检测系统开发示例，包含目标检测、颜色检测和边缘检测功能： 一、环境搭建 1. 安装依赖 pip install opencv-python numpy matplotlib 2. 准备测试图片下载示例图片或使用本地图片（如 test.jpg &…...

编程日记 2025/8/11 11:31:02

架空输电线巡检机器人轨迹优化设计

架空输电线巡检机器人轨迹优化摘要本论文针对架空输电线巡检机器人的轨迹优化问题展开研究，综合考虑输电线复杂环境、机器人运动特性及巡检任务需求，结合路径规划算法、智能优化算法与机器人动力学约束，构建了多目标轨迹优化模型。通过改进遗传算法与模拟退火算法，有效…...

编程日记 2025/8/11 11:32:18

针对共享内存和上述windows消息机制在C++ 和qt之间的案例进行详细举例说明

针对共享内存和上述windows消息机制在C++ 和qt之间的案例进行详细举例说明以下是关于在 C++ 和 Qt 中使用共享内存（QSharedMemory）和 Windows 消息机制（SendMessage / PostMessage）进行跨线程或跨进程通信的详细示例。 🧩 使用 QSharedMemory 进行进程间通信（Qt 示例…...

编程日记 2025/8/11 11:34:03

cursor平替，试试 vscode+cline+openrouter 的方案，还能自定义 mcp-server 教程大纲

一、引言 cursor 工具使用成本高的现状编程agent好用，解放劳动力，但费用贵 vscodeclineopenrouter Cline 是一款可集成在 IDE 中的 AI 编程助手，支持 OpenAI 和 Ollama 等多种模型，能在 IDE 里自主完成复杂编程任务，…...

编程日记 2025/8/5 7:21:32

Qt实现车载多媒体项目，包含天气、音乐、视频、地图、五子棋功能模块，免费下载源文件！

本文主要介绍项目，项目的结构，项目如何配置，项目如何打包。这篇文章如果对你有帮助请点赞和收藏，谢谢！源代码仅供学习使用，如果转载文章请标明出处！（免费下载源代码）&…...

编程日记 2025/8/5 9:31:19

C++ set替换vector进行优化

文章目录 demo代码解释： 底层原理1. 二叉搜索树基础2. 红黑树的特性3. std::set 基于红黑树的实现优势4. 插入操作5. 删除操作6. 查找操作 demo #include <iostream> #include <set>int main() {// 创建一个存储整数的std::setstd::set<int> myS…...

编程日记 2025/8/5 7:21:30

Android学习总结之算法篇八（二叉树和数组）

路径总和 import java.util.ArrayList; import java.util.List;// 定义二叉树节点类 class TreeNode {int val;TreeNode left;TreeNode right;// 构造函数，用于初始化节点值TreeNode(int x) {val x;} }public class PathSumProblems {// 路径总和 I：判…...

编程日记 2025/8/5 7:21:28

正点原子IMX6U开发板移植Qt时出现乱码

移植Qt时出现乱码 1、前言2、问题3、总结 1、前言记录一下正点原子IMX6U开发板移植Qt时出现乱码的解决方法，方便自己日后回顾，也可以给有需要的人提供帮助。 2、问题用正点原子IMX6U开发板移植Qt时移植Qt后，sd卡里已经存储了Qt的各种库&…...

编程日记 2025/8/5 7:21:26

算法解密：轮转数组问题全解析

算法解密：轮转数组问题全解析一、引言在算法的世界里，数组的操作问题常常考验着我们对数据结构和算法技巧的掌握程度。“轮转数组”问题就是其中一个经典且有趣的题目。它看似简单，却蕴含着多种巧妙的解法。通过深入研究这个问题，我们能更好地理解数组的特性，提升算法思…...

编程日记 2025/8/5 7:21:25

正则化和L1/L2范式

1. 背景与引入历史与位置正则化（Regularization）是机器学习中控制模型复杂度、提升泛化能力的核心手段之一。 L2范式（Ridge正则化）最早可追溯至20世纪70年代的Tikhonov正则化，用于解决病态线性方程组问题&#xf…...

编程日记 2025/8/5 7:21:22

day05_java中常见的运算符

对字面量或者变量进行操作的符号就是运算符。用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式。 java中常用的运算符有下面几种算术运算符代码示例 public class Demo01Operator {public static void main(String[] args) {int a 3;int b 4;System.o…...

编程日记 2025/8/5 7:21:21

Linux_进程退出与进程等待

一、进程退出 ‌退出场景‌ ‌正常终止‌：代码执行完毕且结果符合预期（退出码为 0）。‌异常终止‌：运行结果错误（退出码非 0）或进程被信号强制终止。（如 SIGINT 或 SIGSEGV）。 ‌退…...

编程日记 2025/8/5 7:21:19

SSM框架（Spring + Spring MVC + MyBatis）整合配置的详细步骤

以下是 SSM框架（Spring Spring MVC MyBatis）整合配置的详细步骤，适用于 Maven 项目。 （一）、pom.xml中添加相关依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"ht…...

编程日记 2025/8/5 7:21:17

B. Zero Array（思维）

Problem - 1201B - Codeforces 思路：每次给任意两个不同下表的数减-1，相当于在这个数组总和S上减2，S为奇数则不可能变为0，S为偶数时，一定存在两个序列组成两个S/2，这样每次都是在两个S/2上各减1&#xff0c…...

编程日记 2025/8/6 17:19:27

FPGA_Verilog实现QSPI驱动，完成FLASH程序固化

FPGA_Verilog实现QSPI驱动，完成FLASH程序固化操作提要使用此操作模式实现远程升级的原因是当前的FLASH的管脚直接与FPGA相连接，SPI总线并未直接与CPU相连接，那么则需要CPU下发升级指令与将要升级的文件给FPGA，然后在FPGA内部产…...

编程日记 2025/8/5 9:31:16

一. 初始化

二. 添加路由

三. 封装路由

相关文章：