Frontend Project Creator

前端项目创建器

概述

通过引导用户选择技术栈来创建新的前端项目。支持 React 框架配合 MUI、shadcn/ui 或 Bootstrap 组件库。所有项目使用 Vite 作为构建工具，并使用 React Router 实现导航。

工作流程

第 1 步：询问组件库选择

询问用户使用哪个组件库：

• MUI (Material UI)
• shadcn/ui
• Bootstrap (推荐)

使用 question 工具进行单选（不要多选）。将 Bootstrap 标记为推荐选项。

第 2 步：创建项目

根据用户选择，创建项目结构：

React + MUI

npm create vite@latest . -- --template react-ts
npm install @mui/material @emotion/react @emotion/styled
npm install react-router-dom

React + shadcn/ui

npm create vite@latest . -- --template react-ts
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
npm install react-router-dom

将 src/index.css 替换为：

@import "tailwindcss";

更新 tsconfig.json：

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

更新 tsconfig.app.json（添加到 compilerOptions）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

更新 vite.config.ts：

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    allowedHosts: ['.monkeycode-ai.online']
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

初始化 shadcn/ui：

npx shadcn@latest init

React + Bootstrap

npm create vite@latest . -- --template react-ts
npm install react-bootstrap bootstrap
npm install react-router-dom

第 3 步：配置 Vite（用于 MUI 和 Bootstrap 项目）

在 vite.config.ts 中添加：

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

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: ['.monkeycode-ai.online']
  }
})

第 4 步：创建项目结构

创建以下目录结构：

src/
├── pages/
│   ├── Welcome.tsx
│   └── Home.tsx
├── components/
│   └── Navbar.tsx
├── App.tsx
└── main.tsx

第 5 步：创建页面

创建 src/pages/Welcome.tsx：

import { Container } from "react-bootstrap";

export default function Welcome() {
  return (
    <Container className="text-center mt-5">
      <h1>你好 MonkeyCode</h1>
      <p>欢迎使用 MonkeyCode 前端项目</p>
    </Container>
  );
}

创建 src/pages/Home.tsx：

import { Container } from "react-bootstrap";

export default function Home() {
  return (
    <Container className="text-center mt-5">
      <h1>首页</h1>
      <p>这是首页内容</p>
    </Container>
  );
}

对于 MUI 项目： 将 Bootstrap 组件替换为 MUI 等效组件：

import { Container, Typography } from "@mui/material";

export default function Welcome() {
  return (
    <Container maxWidth="sm" sx={{ mt: 5, textAlign: 'center' }}>
      <Typography variant="h4" component="h1" gutterBottom>
        你好 MonkeyCode
      </Typography>
      <Typography variant="body1">
        欢迎使用 MonkeyCode 前端项目
      </Typography>
    </Container>
  );
}

对于 shadcn/ui 项目：

export default function Welcome() {
  return (
    <div className="text-center mt-5">
      <h1 className="text-4xl font-bold">你好 MonkeyCode</h1>
      <p>欢迎使用 MonkeyCode 前端项目</p>
    </div>
  );
}

第 6 步：创建导航栏组件

创建 src/components/Navbar.tsx：

import { Navbar, Container, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";

export default function Navigation() {
  return (
    <Navbar bg="dark" variant="dark" expand="lg">
      <Container>
        <Navbar.Brand as={Link} to="/">
          MonkeyCode
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/">
              欢迎
            </Nav.Link>
            <Nav.Link as={Link} to="/home">
              首页
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

对于 MUI 项目：

import { AppBar, Toolbar, Typography, Button, Box } from "@mui/material";
import { Link, useLocation } from "react-router-dom";

export default function Navigation() {
  const location = useLocation();

  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          <Link to="/" style={{ color: 'white', textDecoration: 'none' }}>
            MonkeyCode
          </Link>
        </Typography>
        <Box sx={{ display: 'flex', gap: 2 }}>
          <Button color="inherit" component={Link} to="/">
            欢迎
          </Button>
          <Button color="inherit" component={Link} to="/home">
            首页
          </Button>
        </Box>
      </Toolbar>
    </AppBar>
  );
}

对于 shadcn/ui 项目：

import { Button } from "@/components/ui/button"
import { Link, useLocation } from "react-router-dom";

export default function Navigation() {
  const location = useLocation();

  return (
    <nav className="border-b bg-white">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          <Link to="/" className="text-xl font-bold">
            MonkeyCode
          </Link>
          <div className="flex gap-4">
            <Button variant={location.pathname === '/' ? 'default' : 'ghost'} asChild>
              <Link to="/">欢迎</Link>
            </Button>
            <Button variant={location.pathname === '/home' ? 'default' : 'ghost'} asChild>
              <Link to="/home">首页</Link>
            </Button>
          </div>
        </div>
      </div>
    </nav>
  );
}

第 7 步：配置 App.tsx

更新 src/App.tsx：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from "./components/Navbar";
import Welcome from "./pages/Welcome";
import Home from "./pages/Home";

function App() {
  return (
    <Router>
      <Navigation />
      <Routes>
        <Route path="/" element={<Welcome />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

第 8 步：配置 main.tsx

更新 src/main.tsx：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

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

仅对于 React + Bootstrap 项目： 在 main.tsx 顶部添加 Bootstrap CSS 导入：

import 'bootstrap/dist/css/bootstrap.min.css';

第 9 步：安装依赖

npm install

第 10 步：启动开发服务器

npm run dev

注意事项

• 所有项目使用 React + TypeScript + Vite
• 默认安装 React Router 用于导航
• Bootstrap 推荐作为默认组件库
• 所有项目包含"你好 MonkeyCode"欢迎页面
• 项目包含响应式导航栏
• 遵循 Vite 的项目结构约定
• 确保在启动开发服务器前完成所有配置
• shadcn/ui 需要 Tailwind CSS 和路径别名配置
• shadcn/ui init 命令会提示进行额外配置
• MUI 使用 Emotion 作为默认样式引擎
• React Bootstrap 需要导入 Bootstrap CSS 文件