vite从零创建react-ts项目

news2024/12/27 12:05:36

1.创建vite-react-ts文件夹,初始化项目

npm init

初始化后可以看到包管理文件package.json

2.项目结构

  • 根目录下新建index.html模板文件。以往都是放在public文件夹的,但是官方推荐放在根目录。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该 Vite 项目的入口文件。
  • 创建public文件夹,放置静态文件,新建favicon.ico
  • 根目录下创建src/main.tsx,src/App.tsx

 

3.安装vite

npm install vite

修改package.json scripts添加"dev":"vite "启动命令

npm run dev

执行启动命令,项目即可跑起来,入口文件是index.html

4.创建vite.config.ts配置文件

  • 根目录下创建vite.config.ts文件
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server:{
    host:'0.0.0.0',//解决vite use--host to expose
    port:8080,//配置端口
    open:true,//配置默认打开浏览器
  }
})

5.安装react支持插件

npm install @vitejs/plugin-react

vite.config.ts添加插件

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

export default defineConfig({
  server:{
    host:'0.0.0.0',//解决vite use--host to expose
    port:8080,//配置端口
    open:true,//配置默认打开浏览器
  },
  plugins: [react()],
})

安装react相关库

npm i react react-dom

安装react类型声明库

npm i @types/react @types/react-dom

在index.html文件引入main.tsx

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">877878</div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

添加tsconfig.json文件

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

添加tsconfig.node.json文件

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

6.编辑react页面

编辑main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '../src/App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

编辑App.tsx

import  { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/344022.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

qt之条形码与二维码的生成

一、简介 条形码&#xff1a; 条形码(barcode)是将宽度不等的多个黑条和空白&#xff0c;按照一定的编码规则排列&#xff0c;用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条&#xff08;简称条&#xff09;和白条&#xff08;简称空&#xff09;排…

探讨接口测试以及其用例设计方法

接口测试的总结文档 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xff1a;主要介绍为什…

数据结构:带环单链表基础OJ练习笔记(leetcode142. 环形链表 II)(leetcode三题大串烧)

目录 一.前言 二.leetcode160. 相交链表 1.问题描述 2.问题分析与求解 三.leetcode141. 环形链表 1.问题描述 2.代码思路 3.证明分析 下一题会用到的重要小结论&#xff1a; 四.leetcode142. 环形链表 II 1.问题描述 2.问题分析与求解 Judgecycle接口&#xf…

婴儿监视器美国亚马逊CPC认证ASTM F2951标准要求?

婴儿监视器&#xff0c;又称婴儿监听器、婴儿监护器&#xff0c;英文名为( baby monitor其主要用于用于居家和婴儿的监听和护理。欧美市场上广泛使用&#xff0c;已经存在30年历史的 Baby Monitor是采用现代无线电技术应用于居家和婴儿的监听和护理的好帮手。婴儿监护器由看器(…

基于Jeecgboot前后端分离的ERP系统开发系列--出库单(1)

这次从出库单开始进行整个单据录入显示的模板&#xff0c;不再采用默认的online表单代码生成的方式&#xff0c;以满足实际的业务需要&#xff0c;当然刚开始做&#xff0c;以后还需要进行改进。 一、首先单号生成 采用系统开发里的代码编码规则&#xff0c;相应的修改增加代码…

7、MyBatis框架——MyBatis对一对一关系的处理、分步查询、MyBatis对一对多关系的处理

目录 一、项目框架搭建 二、在实体类中添加额外属性实现多表查询 1、mybatis两表关联查询 &#xff08;1&#xff09;实体类类型映射规则 &#xff08;2&#xff09;代码演示 2、分步查询 &#xff08;1&#xff09;autoMapping开启自动映射 &#xff08;2&#xff09;…

Python-正则表达式详解-快速掌握正则表达式核心函数

正则表达式为为高级的文本模式匹配、抽取或文本形式的搜索和替换功能提供了基础。本文主要介绍python正则表达式的一些基础功能&#xff0c;掌握它也可以使得在python编程中处理字符串游刃有余。1.简介正则表达式是一些由字符和特殊符号组成的字符串&#xff0c;匹配一系列有相…

Ansible的安装及部署

目录 一、Ansible对于企业运维的重大意义 二、Ansible的安装 三、构建Ansible清单 1.直接书写受管主机名或ip&#xff0c;每行一个 2.设定受管主机的组[组名称] 四、Ansible配置文件参数详解 1、配置文件的分类与优先级 2.配置新用户的Ansible配置 3.生成免密认证 本章…

算法 ——世界 二

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。个人爱好: 编程&#xff0c;打篮球&#xff0c;计算机知识个人名言&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石…

Linux管道选取命令:cut、grep

选取命令就是将一段数据经过分析后&#xff0c;取出我们所想要的&#xff0c;或是经历分析关键词&#xff0c;取得我们所想要的那一行 一般来说&#xff0c;选取信息通常是针对一行一行来分析的&#xff0c;而不是整篇信息分析 下面介绍两个很常用的信息选取命令&#xff1a;…

Numpy基础与实例——人工智能基础——机器学习

文章目录一、Numpy概述1. 优势2. numpy历史3. Numpy的核心&#xff1a;多维数组4. 内存中的ndarray对象4.1 元数据&#xff08;metadata&#xff09;4.2 实际数据二、numpy基础1. ndarray数组2. arange、zeros、ones、zeros_like3. ndarray对象属性的基本操作3.1 修改数组维度3…

dubbo接口自动化用例性能优化

dubbo接口自动化用例性能优化 目录&#xff1a;导读 前言 优化本地调试时间 单用例执行时间的优化 提高并发 最后 前言 去年换了一个新部门&#xff0c;看了下当前的自动化用例的情况&#xff0c;发现存在三类性能问题&#xff1a; 本地调试运行时等待时间较长&#xf…

C++学习记录——팔 内存管理

文章目录1、动态内存管理2、内存管理方式operator new operator delete3、new和delete的实现原理1、动态内存管理 C兼容C语言关于内存分配的语法&#xff0c;而添加了C独有的东西。 //int* p1 (int*)malloc(sizeof(int));int* p1 new int;new是一个操作符&#xff0c;C不再需…

【工具】图片和PDF批量区域OCR识别图片文字并重命名,如何批量图片识别文字并将识别的文字改名该图片

前段时间接到一个棘手的难题&#xff08;识别图片文字&#xff0c;将图片文件名改成该文字&#xff09; 因为不解决就得手动挨个挨个输入然后把文件命名好 今天又一个文件需求是这样的 图上有姓名文字&#xff0c;要识别出来改成每一张图跟这个一样&#xff0c;有的人说了缩…

学习笔记——吴恩达《神经网络与深度学习》

神经网络与深度学习1. 基础知识神经网络用神经网络进行监督学习2. 神经网络基础知识二分分类logistic回归logistic回归损失函数梯度下降法导数计算图logistic回归中的梯度下降法m个样本的梯度下降向量化Python中的广播3. 浅层神经网络神经网络概述神经网络表示计算神经网络的输…

Android自动化测试——Monkey

本来是做Web后端的&#xff0c;来公司实习变成微信小程序前端了&#xff0c;到这周变成Android APP测试人员了&#xff0c;也是微醺啊。 由于对手工测试终究是有些抵触&#xff0c;所有昨天小试了一下不用写代码的自动化压力测试&#xff0c;在此记下我的心得。 一、Monkey与…

TOOM互联网舆情监测中心,互联网舆情监测系统为何出现以及由来?

互联网舆情监测中心是指负责收集、分析和评估互联网上的舆情信息的组织或机构&#xff0c;旨在帮助政府、企业、媒体和其他相关组织了解公众对特定话题的看法、情感和态度&#xff0c;并采取相应的措施应对和管理舆情事件&#xff0c;TOOM互联网舆情监测中心&#xff0c;互联网…

Hudi-集成Spark之spark-shell 方式

Hudi集成Spark之spark-shell 方式 启动 spark-shell &#xff08;1&#xff09;启动命令 #针对Spark 3.2 spark-shell \--conf spark.serializerorg.apache.spark.serializer.KryoSerializer \--conf spark.sql.catalog.spark_catalogorg.apache.spark.sql.hudi.catalog.Hoo…

leaflet 本地上传shp文件,在map上解析显示图形(058)

第058个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中本地上传shp文件,利用shapefile读取shp数据,并在地图上显示图形。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 文章目录 示例效果加载shapefile.js方式配置方式示例源代码(共126…

GBDT+LR

为什么需要GBDTLR 协同过滤和矩阵分解存在问题: 仅利用了用户与物品相互行为信息进行推荐&#xff0c; 忽视了用户自身特征&#xff0c; 物品自身特征以及上下文信息等&#xff0c;导致生成的结果往往会比较片面。 FFM 存在问题 FFM特征交叉能力有限&#xff1a;虽然 FFM 模型…