使用Vite创建React初始化项目

gzzeason2025-07-09 16:18

一、初始化最终目录如下

react-app/

├── node_modules #包文件

├── public/ # 静态资源

├── src/ # 源代码目录

│ ├── App.jsx

│ └── main.jsx # JS入口文件

├── index.html # Vite的入口文件

├── package.json

└── vite.config.js

二、操作步骤

创建文件react-app
切换到cd react-app目录并初始化npm init -y
安装制定版本react：npm install react@18.2.0 react-dom@18.2.0
安装依赖Vite：npm install --save-dev vite@4.4.0 @vitejs/plugin-react@4.0.0

创建Vite配置文件：

bash 复制代码

echo 'import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    open: true,
    port: 3000
  }
});' > vite.config.js

创建index.html

bash 复制代码

echo '<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>React 学习环境</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>' > /index.html

创建scr目录、App组件和JS入口文件

bash 复制代码

# - 创建 React 组件
mkdir src
echo 'function App() {
  return (
    <div>
      <h1>React {React.version} 学习环境</h1>
      <p>成功运行！现在可以开始学习 React。</p>
    </div>
  );
}

export default App;' > src/App.jsx

# - 创建入口文件
echo 'import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);' > src/main.jsx

创建静态文件夹public
bash 复制代码
```
mkdir public
```