用途:通过引导用户选择组件库,从零搭建一个带响应式导航栏与多页面结构的前端项目。
主要能力:统一使用 React + TypeScript + Vite 脚手架,使用 React Router 实现导航;支持三种组件库方案:MUI(Material UI,使用 Emotion 样式引擎)、shadcn/ui(需要 Tailwind CSS 与路径别名配置)、Bootstrap(React Bootstrap,推荐选项)。项目默认包含 Welcome 与 Home 两个页面及 Navbar 组件。
使用方式: 第 1 步:询问组件库选择(单选,Bootstrap 为推荐项)。 第 2 步:创建项目。以 React + MUI 为例执行: npm create vite@latest . -- --template react-ts npm install @mui/material @emotion/react @emotion/styled npm install react-router-dom shadcn/ui 方案还需执行: npm install tailwindcss @tailwindcss/vite npm install -D @types/node npm install react-router-dom npx shadcn@latest init Bootstrap 方案执行: npm create vite@latest . -- --template react-ts npm install react-bootstrap bootstrap npm install react-router-dom 第 3 至 8 步:配置 Vite(MUI 与 Bootstrap 项目)、创建目录结构(src/pages、src/components)、创建 Welcome/Home 页面与 Navbar 组件、配置 App.tsx 与 main.tsx(Bootstrap 项目需在 main.tsx 顶部导入 bootstrap CSS)。 第 9 步:npm install 第 10 步:npm run dev 启动开发服务器。
适用场景:需要按指定技术栈快速初始化 React 多页面项目时。
限制:仅支持 React 框架;三种组件库的代码写法不同,需按对应方案替换;启动前须完成全部配置;shadcn/ui 依赖 Tailwind CSS 与路径别名,且 init 命令会提示额外配置。其他框架、收费与价格信息暂未提供。