AI原生前端开发（026）：AI驱动的项目初始化与配置

前言

项目初始化是开发的第一步！AI可以帮我们快速搭建项目、配置环境，让我们专注于业务开发！

1. AI驱动的项目初始化流程

1.1 使用Cursor初始化项目

bash 复制代码

# 在Cursor中打开终端
# 告诉AI你要创建的项目

1.2 AI配置文件生成

javascript 复制代码

// 让AI生成完整的项目配置
/* 
需求：
- React 19 + TypeScript
- Vite 5
- Tailwind CSS
- ESLint + Prettier
- 路由 (React Router)
- 状态管理 (Zustand)
*/

// package.json
{
  "name": "ai-driven-project",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^6.22.0",
    "zustand": "^4.5.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "@vitejs/plugin-react": "^4.2.0",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "prettier": "^3.2.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
    "vite": "^5.1.0"
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  }
})

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// tsconfig.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": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

2. 完整项目结构生成

javascript 复制代码

// 告诉AI生成完整的项目结构
/*
项目结构：
/src
  /components
    /ui
      Button.tsx
      Card.tsx
      Input.tsx
  /pages
    Home.tsx
    About.tsx
    NotFound.tsx
  /hooks
    useAuth.ts
    useTheme.ts
  /stores
    useAppStore.ts
  /utils
    api.ts
    format.ts
  App.tsx
  main.tsx
  index.css
*/

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

export default App

// pages/Home.tsx
export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          AI驱动的项目
        </h1>
        <p className="text-gray-600">项目初始化完成！</p>
      </div>
    </div>
  )
}

3. 踩坑记录

问题	解决方案
AI生成的依赖版本过旧	手动更新到最新稳定版
配置文件有冲突	让AI重新生成或手动合并
项目结构不符合团队规范	先告诉AI团队规范再生成

4. 今日小结

这一篇我们学习了：

AI驱动的项目初始化流程
配置文件自动生成
完整项目结构生成

5. 下篇预告

下一篇，我们学习 AI辅助的代码生成与重构最佳实践！