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

React腳手架已經創建好了，想使用Vite作為開發依賴

news 2025/9/18 10:49:43

使用Vite作為開發依賴

  • 安裝VITE
  • 配置VITE配置文件
  • 簡單的VITE配置項
  • 更改package.json中的scripts
  • 在根目錄中添加index.html
  • 現在可以瀏覽你的頁面了

安裝VITE

首先，在現有的React項目中安裝VITE

npm install vite --save-dev
||
yarn add vite --dev

配置VITE配置文件

my-react-vite-app/
├── node_modules/
├── public/
├── src/
├── package.json
├── vite.config.js -- 添加VITE配置目錄
└── README.md

簡單的VITE配置項

記住安裝一下 @vitejs/plugin-react 包

yarn add @vitejs/plugin-react --dev

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],server: {port: 3000}// 其他配置选项
});

更改package.json中的scripts

// ... "scripts": {"start": "vite","build": "vite build","lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview": "vite preview"},// ...

在根目錄中添加index.html

指向的是你的 index.jsx 或 main.jsx

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + React</title></head><body><div id="root"></div><script type="module" src="/src/main.jsx"></script></body>
</html>

現在可以瀏覽你的頁面了

在这里插入图片描述

相关文章：

React腳手架已經創建好了，想使用Vite作為開發依賴

使用Vite作為開發依賴 安裝VITE配置VITE配置文件簡單的VITE配置項更改package.json中的scripts在根目錄中添加index.html現在可以瀏覽你的頁面了 安裝VITE 首先&#xff0c;在現有的React項目中安裝VITE npm install vite --save-dev || yarn add vite --dev配置VITE配置文件 …...

编程日记 2024/3/25 2:20:02

数据结构——双向链表（C语言版）

上一章&#xff1a;数据结构——单向链表&#xff08;C语言版&#xff09;-CSDN博客 目录 什么是双向链表&#xff1f; 双向链表的节点结构 双向链表的基本操作 完整的双向链表示例 总结 什么是双向链表&#xff1f; 双向链表是一种常见的数据结构&#xff0c;它由一系列节…...

编程日记 2024/3/25 2:19:01

缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题

一、缓存雪崩 简单理解&#xff1a;由于原有缓存失效&#xff0c;新缓存未到期间 (例如&#xff1a;设置缓存时采用了相同的过期时间&#xff0c;在同一时刻出现大面积的缓存过期)&#xff0c;所有原本应该访问缓存的请求都去查询数据库了&#xff0c;而对数据库CPU和内存造成…...

编程日记 2024/3/25 2:17:59

深度学习pytorch——多层感知机反向传播（持续更新）

在讲解多层感知机反向传播之前&#xff0c;先来回顾一下多输出感知机的问题&#xff0c;下图是一个多输出感知机模型&#xff1a; 课时44 反向传播算法-1_哔哩哔哩_bilibili 根据上一次的分析深度学习pytorch——感知机&#xff08;Perceptron&#xff09;&#xff08;持续更新…...

编程日记 2024/3/25 2:15:58

五、分布式锁-redission

源码仓库地址&#xff1a;gitgitee.com:chuangchuang-liu/hm-dingping.git 1、redission介绍 目前基于redis的setnx特性实现的自定义分布式锁仍存在的问题&#xff1a; 问题描述重入问题同一个线程无法多次获取统一把锁。当方法A成功获取锁后&#xff0c;调用方法B&#xff0…...

编程日记 2024/3/25 2:14:57

ARM的三个按键实验

main.c #include "key_inc.h"//封装延时函数void delay(int ms){int i,j;for(i0;i<ms;i){for(j0;j<2000;j){}}}int main(){//按键中断初始化key1_it_config();key2_it_config();key3_it_config();while(1){printf("in main pro\n");delay(1000);}re…...

编程日记 2024/3/25 2:09:50

高架学习笔记之需求工程

目录 一、什么是软件需求 二、需求工程 2.1. 需求获取 2.2. 需求分析 2.3. 形成需求规格 2.4. 需求确认 2.5. 需求管理 2.5.1. 变更控制 2.5.2. 版本控制 2.5.3. 需求跟踪 2.5.4. 需求状态跟踪 一、什么是软件需求 软件需求目前没有统一的定义&#xff0c;一般是指用…...

编程日记 2024/3/25 2:08:49

mysql基础2多表查询

多表查询 多表关系: 一对多 案例: 部门 与 员工的关系 关系: 一个部门对应多个员工&#xff0c;一个员工对应一个部门 实现: 在多的一方建立外键&#xff0c;指向一的一方的主键 多对多 案例: 学生 与 课程的关系 关系: 一个学生可以选修多门课程&#xff0c;一门课程也可以…...

编程日记 2024/3/25 2:07:48

Qt 写一个邮件发送程序

最近在完成一个邮箱代替的告警功能&#xff0c;写了一个邮件发送的demo 以下为代码&#xff1a; #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include<QTcpSocket> namespace Ui { class MainWindow; }class MainWindow : public QMainWin…...

编程日记 2024/3/25 2:04:45

swagger3快速使用

目录 &#x1f37f;1.导入依赖 &#x1f32d;2.添加配置文件 &#x1f9c2;3.添加注解 &#x1f96f;4.访问客户端 1.导入依赖 引入swagger3的依赖包 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artif…...

编程日记 2024/3/25 2:03:44

一键入门Ubuntu22！

目录 一、安装 二、常用目录 三、常用指令 四、用户指令 五、ssh与scp 六、服务相关 七、Python与Pycharm 八、Vim编辑器 九、Ubuntu22下使用Mysql 十、Ubuntu22下使用mongodb 十一、Ubuntu22下使用redis Ubuntu是一个基于Debian的开源操作系统&#xff0c;由Canoni…...

编程日记 2024/3/25 1:59:41

阿里云服务器价格购买价格表，2024新版报价查询

2024年腾讯云服务器优惠价格表&#xff0c;一张表整理阿里云服务器最新报价&#xff0c;阿里云服务器网整理云服务器ECS和轻量应用服务器详细CPU内存、公网带宽和系统盘详细配置报价单&#xff0c;大家也可以直接移步到阿里云CLUB中心查看 aliyun.club 当前最新的云服务器优惠券…...

编程日记 2024/3/25 1:55:38

实现防抖函数并支持第一次立刻执行（vue3 + ts环境演示）

1、先看一效果&#xff1a; 2、实现思路&#xff1a; 使用定时器setTimeout和闭包实现常规防抖功能&#xff1b;增加immediate字段控制第一次是否执行一次函数&#xff08;true or false&#xff09;&#xff1b;增加一个flag标识&#xff0c;在第一次执行时&#xff0c;将标…...

编程日记 2024/3/25 1:54:37

WPF —— DataGrid数据网格

1 &#xff1a;DataGrid简介 DataGrid 是数据网格 : 可以显示网格数据的控件&#xff0c;通过自定义列模版 来去实现各种网格效果 &#xff0c; 可以使用以下几中标签显示不同数据 2 &#xff1a;DataGrid常用的组件 显示文本: DataGridTextColumn 显示复选框: DataGridChec…...

编程日记 2024/3/25 1:52:35

牛客题霸-SQL进阶篇（刷题记录一）

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 部分题目因…...

编程日记 2024/3/25 1:51:34

网络安全实训Day12

写在前面 注意根据笔记中的缩进判断该文本所在层级。 网络空间安全实训-网络安全技术 SSL VPN SSL协议 定义&#xff1a;一种应用层的安全保护技术 工作流程 1.客户端与服务器通过三次握手建立TCP连接 2.客户端向服务器发送Client-Hello信息&#xff0c;消息中包含希望访问的…...

编程日记 2024/3/25 1:45:28

对话Midjourney创始人：图片仅是起步，人工智能将全面改变学习、创意和组织。

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 ​ 发布在https://it.weoknow.com 关注我 Midjourney 是一家神奇的公司&#xff0c;11 人改变世界&#xff0c;创造伟大的产品。…...

编程日记 2024/3/25 1:39:23

Elasticsearch：将 ILM 管理的数据流迁移到数据流生命周期

警告&#xff1a;此功能处于技术预览阶段&#xff0c;可能会在未来版本中更改或删除。 Elastic 将努力解决任何问题&#xff0c;但技术预览版中的功能不受官方 GA 功能的支持 SLA 的约束。目前的最新版本为 8.12。 在本教程中&#xff0c;我们将了解如何将现有数据流&#xff0…...

编程日记 2024/3/25 1:38:22

LeetCode刷题记录——day6

1、https://leetcode.cn/problems/length-of-last-word/description/?envTypestudy-plan-v2&envIdtop-interview-150 直接从后往前遍历就好 class Solution { public:int lengthOfLastWord(string s) {int length0;int lens.length();for(int ilen-1;i>0;i--){if(s[i]…...

编程日记 2024/3/25 1:36:20

C++String类

1. 前言 String是C中操作字符串的类&#xff0c;它是在比较早的时候设计的STL模板&#xff0c;因此在某些地方设计的有些冗余 对于String类&#xff0c;不仅仅是学会使用它&#xff0c;更重要的是要从底层去理解它&#xff1b;本篇文章将从底层出发&#xff0c;模拟实现常用的S…...

编程日记 2024/3/25 1:34:18

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/9/17 8:39:28

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/9/7 1:36:13

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/9/13 17:40:32

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/9/2 16:55:16

ffmpeg（三）：处理原始数据命令

FFmpeg 可以直接处理原始音频和视频数据&#xff08;Raw PCM、YUV 等&#xff09;&#xff0c;常见场景包括&#xff1a; 将原始 YUV 图像编码为 H.264 视频将 PCM 音频编码为 AAC 或 MP3对原始音视频数据进行封装&#xff08;如封装为 MP4、TS&#xff09; 处理原始 YUV 视频…...

编程新知 2025/9/18 9:41:55

JUC并发编程（二）Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除

目录 一 基础 1 概念 2 卖票问题 3 转账问题 二 锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理 一 基础 1 概念 临界区 一段代码块内如果存在对共享资源的多线程读写操作&#xf…...

编程新知 2025/9/9 9:59:12

学习 Hooks【Plan - June - Week 2】

一、React API React 提供了丰富的核心 API&#xff0c;用于创建组件、管理状态、处理副作用、优化性能等。本文档总结 React 常用的 API 方法和组件。 1. React 核心 API React.createElement(type, props, …children) 用于创建 React 元素&#xff0c;JSX 会被编译成该函数…...

编程新知 2025/7/31 1:20:19