vite 初始化react项目

桥豆麻袋93932025-05-09 10:26

一. 初始化

复制代码

npm create vite@latest

Project name 项目名，例如：todo-list
Select a framework 选：React
Select a variant 选：TypeScript

npm install //安装依赖
npm run dev //启动项目

这样一个简单的react项目就实现了。

二. 添加路由

复制代码

npm install react-router-dom

修改main.tsx文件，使用BrowserRouter包裹

import React from 'react'
import App from './App.tsx'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)
创建页面组件src/pages，创建页面。
例：src/pages/Home.tsx

export default function Home() {
return (

Home

)
}
在App.tsx中引入页面，页面使用包裹，使用Link进行页面跳转

import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

function App() {
return (
<Link to="/">🏠 Home</Link>
复制代码
```
   <Routes>
     <Route path="/" element={<Home />} />
   </Routes>
 </div>
```
)
}

export default App

npm run dev 启动项目

三. 封装路由

为了更方便维护，可以直接将路由配置封装到专门的文件内。

创建路由组件src/router/index.tsx

index.tsx

复制代码

import { createBrowserRouter } from 'react-router-dom'
import Home from '@/pages/Home'
import About from '@/pages/About'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  ...
])

export default router

我删除了app.tsx文件，直接在main.tsx中创建App渲染。

复制代码

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "@/router";

const App = () => {
  return <RouterProvider router={router} />;
};

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

npm run dev 启动项目