create-tengits-app

v1.1.9

Published

a day ago

🚀 快速创建基于 React + Rsbuild + TypeScript + Tailwind CSS + Antd 的现代前端项目脚手架

0High
0Medium
0Low

keeee

react rsbuild typescript tailwindcss antd scaffold cli template frontend boilerplate

Create Tengits App

🚀 快速创建基于 React + Rsbuild + TypeScript + Tailwind CSS + Antd 的现代前端项目脚手架

✨ 特性

⚡ 快速构建 - 基于 Rsbuild 的极速构建体验
⚛️ React 18 - 最新的 React 版本，支持并发特性
🔷 TypeScript - 完整的类型安全支持
🎨 Tailwind CSS - 实用优先的 CSS 框架
🐜 Ant Design - 企业级 UI 组件库
🌍 国际化 - 完整的 i18n 支持（React-i18next）
📱 响应式设计 - 移动端友好
🔧 开发工具 - ESLint、PostCSS 等完整工具链
📦 Monorepo - 基于 pnpm workspace 的包管理
🎯 生产就绪 - 开箱即用的生产环境配置
🏢 多项目支持 - 包含普通前端项目、文档管理系统和TTOS客户端项目

🚀 快速开始

方式一：使用 npx（推荐）

npx create-tengits-app

方式二：全局安装

# 使用 npm
npm install -g create-tengits-app

# 使用 yarn
yarn global add create-tengits-app

# 使用 pnpm
pnpm add -g create-tengits-app

# 创建项目
create-tengits-app

方式三：一键创建

# npm
npm create react-rsbuild-app

# yarn
yarn create react-rsbuild-app

# pnpm
pnpm create react-rsbuild-app

📖 使用方法

运行脚手架命令
```
npx create-tengits-app
```

输入项目名称

请输入项目名称（默认: my-react-app）: my-awesome-project

等待项目创建和依赖安装 脚手架会自动：
- 创建项目目录
- 复制模板文件
- 安装项目依赖
- 配置项目信息

启动开发服务器

cd my-awesome-project
pnpm start  # 或 yarn start / npm start

📁 项目结构

生成的项目结构如下：

my-awesome-project/
├── packages/
│   ├── main/                  # 普通前端项目
│   │   ├── src/
│   │   │   ├── components/    # 可复用组件
│   │   │   ├── pages/         # 页面组件
│   │   │   │   ├── Home/      # 首页
│   │   │   │   └── Login/     # 登录页
│   │   │   ├── styles/        # 样式文件
│   │   │   ├── types/         # TypeScript 类型定义
│   │   │   ├── utils/         # 工具函数
│   │   │   ├── App.tsx        # 应用主组件
│   │   │   ├── index.jsx      # 应用入口
│   │   │   ├── routes.tsx     # 路由配置
│   │   │   └── menus.jsx      # 菜单配置
│   │   ├── public/            # 静态资源
│   │   │   ├── locales/       # 国际化文件
│   │   │   └── ...
│   │   ├── package.json       # 包配置文件
│   │   ├── rsbuild.config.ts  # Rsbuild 配置
│   │   ├── tailwind.config.js # Tailwind 配置
│   │   └── tsconfig.json      # TypeScript 配置
│   │
│   ├── docs/                  # 产品全生命周期文档管理项目
│   │   ├── pages/             # 文档页面
│   │   │   ├── requirements/  # 需求文档
│   │   │   ├── designs/       # 设计文档
│   │   │   ├── api/           # 接口文档
│   │   │   ├── develop/       # 开发文档
│   │   │   ├── logs/          # 更改日志
│   │   │   └── test/          # 测试文档
│   │   ├── package.json       # 文档项目配置
│   │   ├── vite.config.ts     # Vite 配置
│   │   └── tsconfig.json      # TypeScript 配置
│   │
│   └── client/                # TTOS客户端项目
│       ├── src/
│       │   ├── components/    # 客户端组件
│       │   ├── pages/         # 客户端页面
│       │   │   ├── Home/      # 首页
│       │   │   ├── Login/     # 登录页
│       │   │   ├── BIViewer/  # BI查看器
│       │   │   ├── ExcelViewer/ # Excel查看器
│       │   │   └── Example/   # 示例页面
│       │   ├── types/         # 类型定义
│       │   ├── utils/         # 工具函数
│       │   ├── AppNew.tsx     # 应用主组件
│       │   ├── index.jsx      # 应用入口
│       │   ├── routes.tsx     # 路由配置
│       │   ├── menus.tsx      # 菜单配置（由租户端创建）
│       │   └── configSystemData.ts # 系统配置
│       ├── package.json       # 客户端配置
│       ├── rsbuild.config.ts  # Rsbuild 配置
│       └── tsconfig.json      # TypeScript 配置
│
├── bin/                       # 脚本目录
│   ├── cli.js                 # 脚手架主脚本
│   └── setup-ttos.js          # TTOS项目依赖安装脚本
├── pnpm-workspace.yaml        # pnpm workspace 配置
├── package.json               # 根包配置
├── eslint.config.mjs          # ESLint 配置
└── README.md                  # 项目说明

🏗️ 项目说明

📦 Main 项目 - 普通前端项目

用途：标准的 React 前端应用项目

特点：

基于 React 18 + Rsbuild + TypeScript
集成 Tailwind CSS + Ant Design
支持国际化（i18n）
响应式设计
完整的开发工具链

适用场景：

企业级前端应用开发
管理后台系统
用户界面应用

📚 Docs 项目 - 产品全生命周期文档管理

用途：完整的产品文档管理系统

特点：

基于 Vite + React + MDX
支持 Markdown 和 MDX 格式
自动生成文档站点
响应式文档界面

包含模块：

需求文档：PRD、用户故事、功能规格
设计文档：UI设计稿、设计规范、组件说明
接口文档：API规范、请求响应示例
开发文档：环境搭建、代码规范、部署指南
更改日志：版本变更记录
测试文档：测试计划、用例、报告

适用场景：

项目文档管理
技术文档维护
团队协作文档

🖥️ Client 项目 - TTOS客户端项目

用途：TTOS（腾路操作系统）客户端应用

特点：

必须安装TTOS项目依赖
根据接口服务地址显示不同客户端数据
客户端菜单由租户端创建
自定义开发只需在代码中配置路由

核心功能：

多租户支持
动态菜单配置
系统集成能力
可扩展的页面组件

TTOS依赖项目：

BI：数据分析平台
Bisheng：毕昇AI平台
liteFlow：轻量级工作流引擎
saas：SaaS服务平台
tuiLowCode：TUI低代码平台

适用场景：

企业级客户端应用
多租户SaaS平台
集成多个子系统的统一客户端

🛠️ 可用脚本

在项目目录中，你可以运行：

根目录脚本

`pnpm start`

启动主项目开发服务器（packages/main）

`pnpm build`

构建主项目生产版本

`pnpm preview`

预览主项目生产构建版本

`pnpm doctor`

检查项目配置和依赖

`pnpm setup-ttos`

安装TTOS项目依赖（运行 bin/setup-ttos.js）

各项目独立脚本

Main 项目

cd packages/main
pnpm start        # 启动开发服务器 (端口: 3013)
pnpm build        # 构建生产版本
pnpm preview      # 预览生产版本

Docs 项目

cd packages/docs
pnpm dev          # 启动文档开发服务器
pnpm build        # 构建文档站点
pnpm ssr          # 服务端渲染构建

Client 项目

cd packages/client
pnpm start        # 启动客户端开发服务器
pnpm start:test   # 启动测试环境
pnpm start:pre    # 启动预发布环境
pnpm build        # 构建生产版本
pnpm build:test   # 构建测试版本
pnpm build:pre    # 构建预发布版本

🎨 技术栈

构建工具: Rsbuild - 基于 Rspack 的高性能构建工具
前端框架: React - 用于构建用户界面的 JavaScript 库
类型系统: TypeScript - JavaScript 的超集，提供静态类型检查
样式方案: Tailwind CSS - 实用优先的 CSS 框架
UI 组件库: Ant Design - 企业级 UI 设计语言和组件库
路由: React Router - React 的声明式路由
状态管理: React Query - 强大的数据同步库
HTTP 客户端: Axios - 基于 Promise 的 HTTP 库
国际化: React-i18next - React 的国际化框架
包管理: pnpm - 快速、节省磁盘空间的包管理器

🔧 自定义配置

Rsbuild 配置

编辑 packages/main/rsbuild.config.ts 来自定义构建配置：

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  // 你的自定义配置
});

Tailwind CSS 配置

编辑 packages/main/tailwind.config.js 来自定义样式：

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // 你的自定义主题
    },
  },
  plugins: [],
};

TypeScript 配置

编辑 packages/main/tsconfig.json 来调整 TypeScript 设置。

🖥️ TTOS客户端项目使用指南

安装TTOS依赖

在开始使用Client项目之前，必须先安装TTOS项目依赖：

# 在项目根目录执行
pnpm setup-ttos

这个命令会：

创建 TTOS 目录
克隆所有TTOS相关项目（BI、Bisheng、liteFlow、saas、tuiLowCode）
安装各项目的依赖
建立全局链接关系

常见问题解决

问题：Module not found: Can't resolve 'react/jsx-dev-runtime'

原因：Client项目缺少React依赖

解决方案：

# 进入client项目目录
cd packages/client

# 安装依赖
pnpm install

# 或者重新安装所有依赖
cd ../..
pnpm install

问题：TTOS依赖未安装

原因：未运行TTOS安装脚本

解决方案：

# 在项目根目录执行
pnpm setup-ttos

客户端配置

1. 系统配置

编辑 packages/client/src/configSystemData.ts 配置系统参数：

// 根据环境变量配置不同的服务地址
const {
  REACT_APP_SYSTEM_ID,
  REACT_APP_PRE_BETA,
  // ... 其他环境变量
} = import.meta.env;

export default function configSystemData() {
  window.systemId = REACT_APP_SYSTEM_ID;
  // 配置系统数据...
}

2. 菜单配置

客户端菜单由租户端创建，在 packages/client/src/menus.tsx 中配置：

// 菜单由后端接口动态获取
export async function getUserAndMenu({ cookie, tenantPara = {} }) {
  // 获取用户信息和菜单数据
  return await httpClient.post('/ttos/user/getUserInfo', {
    applicationId: tenantPara.applicationId,
    platformType: PlatformType.Client,
  });
}

3. 路由配置

自定义开发只需在 packages/client/src/routes.tsx 中配置路由：

// 添加新的页面路由
const routes = [
  {
    path: '/your-page',
    component: YourPageComponent,
  },
  // ... 其他路由
];

多环境支持

Client项目支持多环境配置：

开发环境: pnpm start
测试环境: pnpm start:test
预发布环境: pnpm start:pre

页面组件

Client项目包含以下页面组件：

Home: 首页
Login: 登录页
BIViewer: BI数据查看器
ExcelViewer: Excel文件查看器
Example: 示例页面

🌍 国际化

项目内置了完整的国际化支持：

语言文件位置: packages/main/public/locales/
支持语言: 中文、英文、德文、西班牙文、法文

使用方式:

import { useTranslation } from 'react-i18next';
   
const { t } = useTranslation();
return <div>{t('welcome')}</div>;

📦 部署

构建所有项目

# 构建主项目
pnpm build

# 构建文档项目
cd packages/docs && pnpm build

# 构建客户端项目
cd packages/client && pnpm build

各项目部署

Main 项目部署

cd packages/main
pnpm build

构建后的文件在 packages/main/dist 目录中，可以部署到任何静态文件服务器。

Docs 项目部署

cd packages/docs
pnpm build

构建后的文档站点在 packages/docs/dist 目录中，可以部署到静态文件服务器或CDN。

Client 项目部署

cd packages/client
# 根据环境选择构建命令
pnpm build        # 生产环境
pnpm build:test   # 测试环境
pnpm build:pre    # 预发布环境

构建后的文件在 packages/client/dist 目录中。

环境配置

Main 项目环境

开发环境: pnpm start
生产构建: pnpm build

Docs 项目环境

开发环境: pnpm dev
生产构建: pnpm build
SSR构建: pnpm ssr

Client 项目环境

开发环境: pnpm start
测试环境: pnpm start:test
预发布环境: pnpm start:pre
生产构建: pnpm build

🤝 贡献

欢迎提交 Issue 和 Pull Request！

Fork 项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

📝 更新日志

v1.1.1

🎉 多项目架构支持
✨ 新增 Docs 项目 - 产品全生命周期文档管理
🖥️ 新增 Client 项目 - TTOS客户端项目
🔧 新增 TTOS 依赖安装脚本
📚 完整的文档管理系统（需求、设计、接口、开发、测试、日志）
🏢 多租户客户端支持
🎯 动态菜单配置
🔗 系统集成能力

v1.0.0

🎉 初始版本发布
✨ 支持 React 18 + Rsbuild
🎨 集成 Tailwind CSS + Ant Design
🌍 内置国际化支持
📱 响应式设计

📄 许可证

🙏 致谢

Rsbuild - 极速的 Web 构建工具
React - 用于构建用户界面的 JavaScript 库
Ant Design - 企业级 UI 设计语言
Tailwind CSS - 实用优先的 CSS 框架

如果这个项目对你有帮助，请给一个 ⭐️ Star ⭐️

Made with ❤️ by [Your Name]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Create Tengits App

✨ 特性

🚀 快速开始

方式一：使用 npx（推荐）

方式二：全局安装

方式三：一键创建

📖 使用方法

📁 项目结构

🏗️ 项目说明

📦 Main 项目 - 普通前端项目

📚 Docs 项目 - 产品全生命周期文档管理

🖥️ Client 项目 - TTOS客户端项目

🛠️ 可用脚本

根目录脚本

pnpm start

pnpm build

pnpm preview

pnpm doctor

pnpm setup-ttos

各项目独立脚本

Main 项目

Docs 项目

Client 项目

🎨 技术栈

🔧 自定义配置

Rsbuild 配置

Tailwind CSS 配置

TypeScript 配置

🖥️ TTOS客户端项目使用指南

安装TTOS依赖

常见问题解决

问题：Module not found: Can't resolve 'react/jsx-dev-runtime'

问题：TTOS依赖未安装

客户端配置

1. 系统配置

2. 菜单配置

3. 路由配置

多环境支持

页面组件

🌍 国际化

📦 部署

构建所有项目

各项目部署

Main 项目部署

Docs 项目部署

Client 项目部署

环境配置

Main 项目环境

Docs 项目环境

Client 项目环境

🤝 贡献

📝 更新日志

v1.1.1

v1.0.0

📄 许可证

🙏 致谢

`pnpm start`

`pnpm build`

`pnpm preview`

`pnpm doctor`

`pnpm setup-ttos`