使用Vite创建React初始化项目

发布于：2025-07-09 ⋅ 阅读:(22) ⋅ 点赞:(0)

一、初始化最终目录如下

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配置文件：

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

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入口文件

# - 创建 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
```
mkdir public
```

使用Vite创建React初始化项目

一、初始化最终目录如下

二、操作步骤

网站公告

今日签到

热门文章

最新发布