使用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>
現在可以瀏覽你的頁面了
![[Halcon学习笔记]在Qt上实现Halcon窗口的字体设置颜色设置等功能](https://img-blog.csdnimg.cn/img_convert/bc2637cb32ac52760605e4b939ab57ba.webp?x-oss-process=image/format,png)
