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

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

news 2026/4/6 23:20:47

使用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

10、Ansible 生产级故障排查与运维最佳实践

Ansible 生产级故障排查与运维最佳实践 一、Ansible 生产常见故障类型&#xff08;高频&#xff09; SSH 连接类故障&#xff08;占 60%&#xff09;sudo/权限类故障网络、端口、防火墙Python 环境缺失/版本不兼容Fact 采集慢、超时、卡死文件权限、临时目录权限变量、模板、加…...

编程新知 2026/4/6 21:54:29

如何用 AI Agent Harness Engineering 重构企业生产流程：一套可复制的落地方法论

如何用AI Agent Harness Engineering重构企业生产流程&#xff1a;一套从0到亿可复制的落地方案书关键词&#xff1a;AI Agent、Harness Engineering、企业生产流程重构、智能协作体、低代码Agent编排、端到端流程自动化、ROI可验证落地摘要&#xff1a;当ChatGPT引爆通用人工智…...

编程新知 2026/4/6 21:42:12

ai赋能安装：让快马智能推荐openclaw本地部署的最优配置方案

最近在折腾OpenClaw的本地安装&#xff0c;发现这个爬虫框架虽然强大&#xff0c;但配置起来真是让人头大——不同的硬件环境和应用场景需要完全不同的参数组合。好在发现了InsCode(快马)平台的AI辅助开发功能&#xff0c;用它做了个智能配置工具&#xff0c;分享下实现思路和实…...

编程新知 2026/4/6 21:09:42

定义适应度函数，也就是我们要算的总能耗，越小越好

基于粒子群优化算法的地表水源热泵机组优化调度 以水源热泵机组角度对地表水源热泵系统建模&#xff0c; 并采用粒子群优化算法优化算法求解热泵机组每小时最佳制冷量和制热量最近帮朋友做了个小区地表水源热泵的调度优化项目&#xff0c;一开始以为就是调调空调温度&#xff0…...

编程新知 2026/4/6 19:59:08

如何优化多表查询性能_利用SQL视图与索引视图提升速度

SQL Server索引视图未生效主因是查询未精确匹配视图定义&#xff0c;须显式引用视图名或启用ANSI_WARNINGS/ARITHABORT&#xff1b;MySQL视图无加速作用&#xff1b;PostgreSQL物化视图刷新卡顿需用CONCURRENTLY并建唯一索引。SQL Server 里索引视图为什么没生效&#xff1f;多…...

编程新知 2026/4/6 19:49:06

LangGraph条件边实战：手把手教你打造一个能‘看图说话’的客服工单分流Agent

LangGraph条件边实战&#xff1a;打造智能客服工单分流系统 想象一下&#xff0c;当用户向客服系统发送"我要退款"或"查询物流"这样的请求时&#xff0c;系统能像经验丰富的客服主管一样&#xff0c;瞬间理解意图并将工单精准路由到对应处理部门。这不再是…...

编程新知 2026/4/6 19:29:03

李慕婉-仙逆-造相Z-Turbo 生成Matlab算法脚本：从数学公式到可执行代码

李慕婉-仙逆-造相Z-Turbo 生成Matlab算法脚本&#xff1a;从数学公式到可执行代码 最近在帮一个做信号处理的朋友调试代码&#xff0c;他给我看了一页论文里的公式&#xff0c;问我怎么在Matlab里实现。我盯着那一堆希腊字母和矩阵运算&#xff0c;突然想到&#xff0c;要是能…...

编程新知 2026/4/6 19:16:52

SpringAI与DeepSeek集成：兼容OpenAI API的流式对话实践

1. 环境准备与基础配置 在开始集成SpringAI与DeepSeek之前&#xff0c;我们需要确保开发环境满足以下要求&#xff1a; JDK 17或更高版本&#xff1a;Spring Boot 3.x系列需要JDK 17作为最低版本支持Spring Boot 3.4.2&#xff1a;这是当前推荐的稳定版本Maven或Gradle&#xf…...

编程新知 2026/4/6 19:10:46

LCD1602自定义字符显示实战：从取模到屏幕显示的完整指南

1. LCD1602显示模块基础入门 第一次接触LCD1602时&#xff0c;我完全被它简单的接口和强大的功能吸引了。这块2行16字符的小屏幕&#xff0c;几乎成了所有嵌入式初学者的"Hello World"实验标配。但很多人可能不知道&#xff0c;它内置的字符生成器&#xff08;CGROM&…...

编程新知 2026/4/6 17:47:33

HTML5语义化元素完全解析：提升SEO与可访问性的最佳实践

HTML5语义化元素完全解析&#xff1a;提升SEO与可访问性的最佳实践 【免费下载链接】awesome-html5 :memo: A curated list of awesome HTML5 resources 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-html5 HTML5语义化元素是现代Web开发的核心技术&#xff0c…...

编程新知 2026/4/6 17:23:28