vite react项目
时间: 2023-10-05 07:08:28 浏览: 47
如何使用vite搭建一个React项目?
首先,确保你已经在电脑上安装了最新的Node.js版本和npm包管理工具。然后,按照以下步骤:
1. 创建一个新的React项目文件夹,并进入到该文件夹内。
2. 在该文件夹内运行命令行工具,并输入以下命令来初始化一个新的npm项目:
```
npm init -y
```
该命令会快速创建一个新的npm包,并使用默认设置。
3. 接下来,安装vite的构建工具,输入以下命令:
```
npm install vite --save-dev
```
这个命令会安装vite的构建工具,并将其添加到你的npm项目中,作为开发依赖。
4. 通过以下命令安装React和React DOM:
```
npm install react react-dom --save
```
这个命令会安装React和React DOM,并将它们添加到你的npm项目中。
5. 创建一个新的index.html文件,输入以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
```
6. 在/src文件夹下创建一个名为index.jsx的文件,并输入以下代码:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<div>Hello, World!</div>
</React.StrictMode>,
document.getElementById('root')
);
```
7. 最后,在命令行输入以下指令来启动vite服务器,打开浏览器并访问 http://localhost:3000 ,页面应该呈现出“Hello, World!”的内容:
```
npx vite
```
到此为止,你已经成功地使用vite搭建了一个新的React项目!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)