157 lines
3.2 KiB
Markdown
157 lines
3.2 KiB
Markdown
在 /home/enzo/projects/hive-manage-v3/frontend/ 下创建 React 19 + TypeScript + Vite + Tailwind 前端脚手架。
|
|
|
|
## 步骤 1: 创建 frontend/package.json
|
|
|
|
```json
|
|
{
|
|
"name": "hive-manage-v3-frontend",
|
|
"private": true,
|
|
"version": "0.1.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc && vite build",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"react": "^19.0",
|
|
"react-dom": "^19.0",
|
|
"react-router-dom": "^7.0",
|
|
"axios": "^1.7",
|
|
"lucide-react": "^0.460"
|
|
},
|
|
"devDependencies": {
|
|
"@types/react": "^19.0",
|
|
"@types/react-dom": "^19.0",
|
|
"@vitejs/plugin-react": "^4.3",
|
|
"autoprefixer": "^10.4",
|
|
"postcss": "^8.4",
|
|
"tailwindcss": "^3.4",
|
|
"typescript": "^5.6",
|
|
"vite": "^6.0"
|
|
}
|
|
}
|
|
```
|
|
|
|
## 步骤 2: 创建配置文件
|
|
|
|
frontend/tsconfig.json:
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"target": "ES2020",
|
|
"useDefineForClassFields": true,
|
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
"module": "ESNext",
|
|
"skipLibCheck": true,
|
|
"moduleResolution": "bundler",
|
|
"allowImportingTsExtensions": true,
|
|
"resolveJsonModule": true,
|
|
"isolatedModules": true,
|
|
"noEmit": true,
|
|
"jsx": "react-jsx",
|
|
"strict": true,
|
|
"noUnusedLocals": false,
|
|
"noUnusedParameters": false,
|
|
"noFallthroughCasesInSwitch": true
|
|
},
|
|
"include": ["src"]
|
|
}
|
|
```
|
|
|
|
frontend/vite.config.ts:
|
|
```typescript
|
|
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
server: {
|
|
port: 5173,
|
|
proxy: {
|
|
'/api': 'http://127.0.0.1:8000',
|
|
},
|
|
},
|
|
})
|
|
```
|
|
|
|
frontend/tailwind.config.ts:
|
|
```typescript
|
|
import type { Config } from 'tailwindcss'
|
|
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
honey: { DEFAULT: '#f0b90b', dim: '#b8970e' },
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config
|
|
```
|
|
|
|
frontend/postcss.config.js:
|
|
```js
|
|
export default {
|
|
plugins: {
|
|
tailwindcss: {},
|
|
autoprefixer: {},
|
|
},
|
|
}
|
|
```
|
|
|
|
## 步骤 3: 创建入口文件
|
|
|
|
frontend/index.html:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Hive Manage v3</title>
|
|
</head>
|
|
<body class="bg-[var(--bg-root)] text-[var(--text)]">
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
frontend/src/main.tsx:
|
|
```tsx
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom/client'
|
|
import App from './App'
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode><App /></React.StrictMode>
|
|
)
|
|
```
|
|
|
|
frontend/src/App.tsx:
|
|
```tsx
|
|
export default function App() {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center" style={{background:'var(--bg-root)', color:'var(--text)'}}>
|
|
<h1 className="text-2xl font-bold">Hive Manage v3</h1>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## 步骤 4: 安装依赖并验证
|
|
|
|
```bash
|
|
cd frontend && npm install
|
|
```
|
|
|
|
## 步骤 5: 提交
|
|
|
|
```bash
|
|
cd /home/enzo/projects/hive-manage-v3 && git add frontend/ && git commit -m "feat: Vite + React 19 + Tailwind + TypeScript scaffold"
|
|
```
|