@saiweng/saiweng-starter

一键初始化 React + TypeScript 项目脚手架，开箱即用。

快速开始

npx @saiweng/saiweng-starter

按照交互提示依次选择配置，几秒钟即可生成完整的项目骨架。

交互流程

┌  @saiweng/saiweng-starter
│
◇  项目名称？
│  my-app
│
◇  选择组件库
│  ● Ant Design (antd)
│  ○ shadcn/ui
│
◆  选择样式方案（仅 Ant Design 时出现）
│  ● Tailwind CSS 4
│  ○ CSS Modules + Less
│
◇  选择包管理器
│  ● npm
│  ○ yarn
│  ○ pnpm
│
◇  是否立即安装依赖？
│  ● 是
│  ○ 否（稍后手动安装）
│
└  ✔ 项目创建成功！
   cd my-app && npm run dev

模板变体

| 变体 | 组件库 | 样式方案 | |---|---|---| | antd-tailwind | Ant Design 5 | Tailwind CSS 4 | | antd-cssmodules | Ant Design 5 | CSS Modules + Less | | shadcn | shadcn/ui | Tailwind CSS 4 |

生成项目的技术栈

所有变体均包含以下配置：

• 框架： React 19 + TypeScript
• 构建： Vite 8 + @vitejs/plugin-react
• 路由： React Router 7（BrowserRouter + 嵌套路由）
• 代码检查： vite-plugin-checker（TypeScript + Oxlint 实时检查）
• Lint： Oxlint（.oxlintrc.json）
• 格式化： Oxfmt（.oxfmtrc.json，semi: false）
• 编辑器： VS Code / Cursor（.vscode 推荐 Oxc 扩展，保存时自动 format + fix）
• 图标： lucide-react
• 工具函数： clsx + tailwind-merge（cn() 工具函数）
• 路径别名： @/* → src/*

生成项目的结构

my-app/
├── package.json
├── vite.config.ts
├── tsconfig*.json
├── .oxlintrc.json
├── .oxfmtrc.json
├── .vscode/
│   ├── settings.json        # Oxc 格式化 / Lint 保存时动作
│   └── extensions.json      # 推荐安装 oxc.oxc-vscode
├── .gitignore
├── index.html
└── src/
    ├── main.tsx
    ├── App.tsx              # 路由配置（含 RequireAuth 保护）
    ├── vite-env.d.ts
    ├── index.css
    ├── lib/
    │   └── utils.ts         # cn() 工具函数
    ├── auth/
    │   ├── AuthContext.tsx  # 认证 Context + Provider
    │   └── demo-users.ts    # 演示账号（admin / 123456）
    ├── components/
    │   ├── RequireAuth.tsx
    │   └── layout/
    │       └── AppLayout.tsx    # 可折叠侧边导航 + 顶栏
    └── pages/
        ├── LoginPage.tsx        # 登录页（演示账号）
        ├── DashboardPage.tsx    # 统计卡片 + 趋势图示意
        ├── ListPage.tsx         # 列表 + 详情（master-detail）
        └── FormPage.tsx         # 表单 + 字段校验

路由结构

| 路径 | 页面 | 是否需要登录 | |---|---|---| | /login | 登录页 | 否 | | / | 重定向到 /dashboard | 是 | | /dashboard | 仪表盘 | 是 | | /list | 列表 + 详情 | 是 | | /form | 表单页 | 是 |

未登录访问受保护路由会自动跳转 /login。演示账号：admin / 123456。

生成项目的常用命令

npm run dev          # 启动开发服务器（含实时类型检查 + Lint）
npm run build        # 生产构建（tsc -b && vite build）
npm run preview      # 预览生产产物
npm run lint         # 运行 Oxlint
npm run lint:fix     # 自动修复 Lint 问题
npm run fmt          # 运行 Oxfmt 格式化
npm run fmt:check    # 检查格式是否符合规范

发布（维护者）

npm run release          # 正式发布：bump 版本、生成 CHANGELOG、打 tag、推送、发布 npm
npm run release:dry      # 演练：预览所有操作但不实际执行
npm run release:local-dry  # 本地演练：跳过 npm 发布和 git 操作

发布配置遵循 Angular 提交规范，feat: 类提交自动归入 Features，fix: 类提交归入 Bug Fixes，变更历史写入 CHANGELOG.md。

环境要求

• Node.js ≥ 18