create-tengits-app 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PUBLISH.md +151 -0
- package/README.md +255 -0
- package/USAGE.md +154 -0
- package/bin/cli.js +195 -0
- package/eslint.config.mjs +33 -0
- package/global.d.ts +9 -0
- package/package.json +67 -0
- package/packages/main/.env +24 -0
- package/packages/main/.env.pre +3 -0
- package/packages/main/.env.test +4 -0
- package/packages/main/.eslintrc +9 -0
- package/packages/main/README.md +18 -0
- package/packages/main/dist/manifest.json +40 -0
- package/packages/main/index.html +80 -0
- package/packages/main/index.ts +12 -0
- package/packages/main/package.json +43 -0
- package/packages/main/postcss.config.js +7 -0
- package/packages/main/public/antd.dark.css +26419 -0
- package/packages/main/public/dark.css +32 -0
- package/packages/main/public/evaluation-template.csv +10 -0
- package/packages/main/rsbuild.config.ts +79 -0
- package/packages/main/src/App.tsx +108 -0
- package/packages/main/src/configSystemData.ts +27 -0
- package/packages/main/src/i18n.js +140 -0
- package/packages/main/src/index.jsx +22 -0
- package/packages/main/src/index.less +250 -0
- package/packages/main/src/menus.jsx +123 -0
- package/packages/main/src/pages/Home/index.tsx +102 -0
- package/packages/main/src/pages/Login/common.ts +26 -0
- package/packages/main/src/pages/Login/index.less +15 -0
- package/packages/main/src/pages/Login/index.tsx +238 -0
- package/packages/main/src/routes.tsx +75 -0
- package/packages/main/src/styles/index.css +38 -0
- package/packages/main/src/types/less.d.ts +4 -0
- package/packages/main/src/types/tengitsui.d.ts +7 -0
- package/packages/main/src/types/utils.d.ts +39 -0
- package/packages/main/src/utils/checkPermission.js +19 -0
- package/packages/main/src/utils/day.js +18 -0
- package/packages/main/src/utils/download.js +30 -0
- package/packages/main/src/utils/fileUtils.ts +45 -0
- package/packages/main/src/utils/guid.js +6 -0
- package/packages/main/src/utils/gzip.js +26 -0
- package/packages/main/src/utils/importFile.js +51 -0
- package/packages/main/src/utils/index.ts +9 -0
- package/packages/main/src/utils/request.js +40 -0
- package/packages/main/src/utils/uploadFileToCloud.js +102 -0
- package/packages/main/src/utils/utils.ts +331 -0
- package/packages/main/src/utils/uuid.js +13 -0
- package/packages/main/src/utils/version.js +158 -0
- package/packages/main/tailwind.config.js +27 -0
- package/packages/main/tsconfig.json +6 -0
- package/pnpm-workspace.yaml +16 -0
- package/tsconfig.json +23 -0
package/PUBLISH.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# 发布指南
|
|
2
|
+
|
|
3
|
+
## 📦 发布到 NPM
|
|
4
|
+
|
|
5
|
+
### 1. 准备发布
|
|
6
|
+
|
|
7
|
+
确保所有文件已准备就绪:
|
|
8
|
+
- ✅ `bin/cli.js` - 脚手架入口文件
|
|
9
|
+
- ✅ `package.json` - 包含正确的 bin 配置
|
|
10
|
+
- ✅ `README.md` - 详细的使用说明
|
|
11
|
+
- ✅ `.npmignore` - 排除不必要的文件
|
|
12
|
+
|
|
13
|
+
### 2. 测试脚手架
|
|
14
|
+
|
|
15
|
+
在发布前先本地测试:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# 测试 CLI 是否正常工作
|
|
19
|
+
node bin/cli.js
|
|
20
|
+
|
|
21
|
+
# 或者使用 npm 脚本
|
|
22
|
+
npm run test-cli
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### 3. 登录 NPM
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm login
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
输入你的 NPM 账号信息。
|
|
32
|
+
|
|
33
|
+
### 4. 发布包
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
# 检查包信息
|
|
37
|
+
npm publish --dry-run
|
|
38
|
+
|
|
39
|
+
# 正式发布
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 5. 验证发布
|
|
44
|
+
|
|
45
|
+
发布成功后,可以使用以下方式验证:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
# 使用 npx 运行
|
|
49
|
+
npx create-tengits-app
|
|
50
|
+
|
|
51
|
+
# 或全局安装后运行
|
|
52
|
+
npm install -g create-tengits-app
|
|
53
|
+
create-tengits-app
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 🔄 版本更新
|
|
57
|
+
|
|
58
|
+
### 更新版本号
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
# 补丁版本(bug 修复)
|
|
62
|
+
npm version patch
|
|
63
|
+
|
|
64
|
+
# 次要版本(新功能)
|
|
65
|
+
npm version minor
|
|
66
|
+
|
|
67
|
+
# 主要版本(破坏性更改)
|
|
68
|
+
npm version major
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 重新发布
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
npm publish
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## 📋 发布检查清单
|
|
78
|
+
|
|
79
|
+
发布前请确保:
|
|
80
|
+
|
|
81
|
+
- [ ] 包名在 NPM 上是唯一的
|
|
82
|
+
- [ ] 版本号已正确更新
|
|
83
|
+
- [ ] README.md 包含完整的使用说明
|
|
84
|
+
- [ ] 所有依赖都已正确配置
|
|
85
|
+
- [ ] .npmignore 文件配置正确
|
|
86
|
+
- [ ] CLI 命令能正常执行
|
|
87
|
+
- [ ] 模板文件完整无误
|
|
88
|
+
- [ ] 许可证信息正确
|
|
89
|
+
- [ ] 作者信息已填写
|
|
90
|
+
- [ ] 仓库 URL 已配置
|
|
91
|
+
|
|
92
|
+
## 🎯 推广建议
|
|
93
|
+
|
|
94
|
+
发布后可以考虑:
|
|
95
|
+
|
|
96
|
+
1. **GitHub Release** - 创建 GitHub Release 并添加更新日志
|
|
97
|
+
2. **社交媒体** - 在 Twitter、LinkedIn 等平台分享
|
|
98
|
+
3. **技术博客** - 写一篇介绍文章
|
|
99
|
+
4. **开发者社区** - 在相关论坛和群组分享
|
|
100
|
+
5. **文档优化** - 不断完善文档和示例
|
|
101
|
+
|
|
102
|
+
## 📊 监控和维护
|
|
103
|
+
|
|
104
|
+
### 下载统计
|
|
105
|
+
- 查看 NPM 下载量:https://www.npmjs.com/package/create-tengits-app
|
|
106
|
+
- 使用 npm-stat 等工具监控
|
|
107
|
+
|
|
108
|
+
### 问题反馈
|
|
109
|
+
- 及时处理 GitHub Issues
|
|
110
|
+
- 回应用户反馈
|
|
111
|
+
- 持续优化模板内容
|
|
112
|
+
|
|
113
|
+
### 依赖更新
|
|
114
|
+
- 定期更新依赖版本
|
|
115
|
+
- 测试兼容性
|
|
116
|
+
- 发布新版本
|
|
117
|
+
|
|
118
|
+
## 🚀 自动化发布(可选)
|
|
119
|
+
|
|
120
|
+
可以配置 GitHub Actions 自动发布:
|
|
121
|
+
|
|
122
|
+
```yaml
|
|
123
|
+
# .github/workflows/publish.yml
|
|
124
|
+
name: Publish to NPM
|
|
125
|
+
|
|
126
|
+
on:
|
|
127
|
+
release:
|
|
128
|
+
types: [created]
|
|
129
|
+
|
|
130
|
+
jobs:
|
|
131
|
+
publish:
|
|
132
|
+
runs-on: ubuntu-latest
|
|
133
|
+
steps:
|
|
134
|
+
- uses: actions/checkout@v3
|
|
135
|
+
- uses: actions/setup-node@v3
|
|
136
|
+
with:
|
|
137
|
+
node-version: '16'
|
|
138
|
+
registry-url: 'https://registry.npmjs.org'
|
|
139
|
+
- run: npm ci
|
|
140
|
+
- run: npm publish
|
|
141
|
+
env:
|
|
142
|
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## 📝 注意事项
|
|
146
|
+
|
|
147
|
+
1. **包名唯一性** - 确保包名在 NPM 上没有被占用
|
|
148
|
+
2. **语义化版本** - 遵循 SemVer 规范
|
|
149
|
+
3. **向后兼容** - 避免破坏性更改
|
|
150
|
+
4. **文档维护** - 保持文档与代码同步
|
|
151
|
+
5. **测试充分** - 发布前充分测试各种场景
|
package/README.md
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
# Create Tengits App
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+
🚀 **快速创建基于 React + Rsbuild + TypeScript + Tailwind CSS + Antd 的现代前端项目脚手架**
|
|
6
|
+
|
|
7
|
+
[](https://npmjs.org/package/create-tengits-app)
|
|
8
|
+
[](https://npmjs.org/package/create-tengits-app)
|
|
9
|
+
[](https://github.com/your-username/create-tengits-app/blob/main/LICENSE)
|
|
10
|
+
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
## ✨ 特性
|
|
14
|
+
|
|
15
|
+
- ⚡ **快速构建** - 基于 [Rsbuild](https://rsbuild.dev/) 的极速构建体验
|
|
16
|
+
- ⚛️ **React 18** - 最新的 React 版本,支持并发特性
|
|
17
|
+
- 🔷 **TypeScript** - 完整的类型安全支持
|
|
18
|
+
- 🎨 **Tailwind CSS** - 实用优先的 CSS 框架
|
|
19
|
+
- 🐜 **Ant Design** - 企业级 UI 组件库
|
|
20
|
+
- 🌍 **国际化** - 完整的 i18n 支持(React-i18next)
|
|
21
|
+
- 📱 **响应式设计** - 移动端友好
|
|
22
|
+
- 🔧 **开发工具** - ESLint、PostCSS 等完整工具链
|
|
23
|
+
- 📦 **Monorepo** - 基于 pnpm workspace 的包管理
|
|
24
|
+
- 🎯 **生产就绪** - 开箱即用的生产环境配置
|
|
25
|
+
|
|
26
|
+
## 🚀 快速开始
|
|
27
|
+
|
|
28
|
+
### 方式一:使用 npx(推荐)
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npx create-tengits-app
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 方式二:全局安装
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# 使用 npm
|
|
38
|
+
npm install -g create-tengits-app
|
|
39
|
+
|
|
40
|
+
# 使用 yarn
|
|
41
|
+
yarn global add create-tengits-app
|
|
42
|
+
|
|
43
|
+
# 使用 pnpm
|
|
44
|
+
pnpm add -g create-tengits-app
|
|
45
|
+
|
|
46
|
+
# 创建项目
|
|
47
|
+
create-tengits-app
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 方式三:一键创建
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# npm
|
|
54
|
+
npm create react-rsbuild-app
|
|
55
|
+
|
|
56
|
+
# yarn
|
|
57
|
+
yarn create react-rsbuild-app
|
|
58
|
+
|
|
59
|
+
# pnpm
|
|
60
|
+
pnpm create react-rsbuild-app
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 📖 使用方法
|
|
64
|
+
|
|
65
|
+
1. **运行脚手架命令**
|
|
66
|
+
```bash
|
|
67
|
+
npx create-tengits-app
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
2. **输入项目名称**
|
|
71
|
+
```
|
|
72
|
+
请输入项目名称(默认: my-react-app): my-awesome-project
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
3. **等待项目创建和依赖安装**
|
|
76
|
+
脚手架会自动:
|
|
77
|
+
- 创建项目目录
|
|
78
|
+
- 复制模板文件
|
|
79
|
+
- 安装项目依赖
|
|
80
|
+
- 配置项目信息
|
|
81
|
+
|
|
82
|
+
4. **启动开发服务器**
|
|
83
|
+
```bash
|
|
84
|
+
cd my-awesome-project
|
|
85
|
+
pnpm start # 或 yarn start / npm start
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## 📁 项目结构
|
|
89
|
+
|
|
90
|
+
生成的项目结构如下:
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
my-awesome-project/
|
|
94
|
+
├── packages/
|
|
95
|
+
│ └── main/ # 主应用包
|
|
96
|
+
│ ├── src/
|
|
97
|
+
│ │ ├── components/ # 可复用组件
|
|
98
|
+
│ │ ├── pages/ # 页面组件
|
|
99
|
+
│ │ │ ├── Home/ # 首页
|
|
100
|
+
│ │ │ └── Login/ # 登录页
|
|
101
|
+
│ │ ├── styles/ # 样式文件
|
|
102
|
+
│ │ ├── types/ # TypeScript 类型定义
|
|
103
|
+
│ │ ├── utils/ # 工具函数
|
|
104
|
+
│ │ ├── App.tsx # 应用主组件
|
|
105
|
+
│ │ ├── index.jsx # 应用入口
|
|
106
|
+
│ │ ├── routes.tsx # 路由配置
|
|
107
|
+
│ │ └── menus.jsx # 菜单配置
|
|
108
|
+
│ ├── public/ # 静态资源
|
|
109
|
+
│ │ ├── locales/ # 国际化文件
|
|
110
|
+
│ │ └── ...
|
|
111
|
+
│ ├── package.json # 包配置文件
|
|
112
|
+
│ ├── rsbuild.config.ts # Rsbuild 配置
|
|
113
|
+
│ ├── tailwind.config.js # Tailwind 配置
|
|
114
|
+
│ └── tsconfig.json # TypeScript 配置
|
|
115
|
+
├── pnpm-workspace.yaml # pnpm workspace 配置
|
|
116
|
+
├── package.json # 根包配置
|
|
117
|
+
├── eslint.config.mjs # ESLint 配置
|
|
118
|
+
└── README.md # 项目说明
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## 🛠️ 可用脚本
|
|
122
|
+
|
|
123
|
+
在项目目录中,你可以运行:
|
|
124
|
+
|
|
125
|
+
### `pnpm start`
|
|
126
|
+
启动开发服务器,通常在 [http://localhost:3000](http://localhost:3000) 访问
|
|
127
|
+
|
|
128
|
+
### `pnpm build`
|
|
129
|
+
构建生产版本到 `dist` 目录
|
|
130
|
+
|
|
131
|
+
### `pnpm preview`
|
|
132
|
+
预览生产构建版本
|
|
133
|
+
|
|
134
|
+
### `pnpm doctor`
|
|
135
|
+
检查项目配置和依赖
|
|
136
|
+
|
|
137
|
+
## 🎨 技术栈
|
|
138
|
+
|
|
139
|
+
- **构建工具**: [Rsbuild](https://rsbuild.dev/) - 基于 Rspack 的高性能构建工具
|
|
140
|
+
- **前端框架**: [React](https://reactjs.org/) - 用于构建用户界面的 JavaScript 库
|
|
141
|
+
- **类型系统**: [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集,提供静态类型检查
|
|
142
|
+
- **样式方案**: [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
|
|
143
|
+
- **UI 组件库**: [Ant Design](https://ant.design/) - 企业级 UI 设计语言和组件库
|
|
144
|
+
- **路由**: [React Router](https://reactrouter.com/) - React 的声明式路由
|
|
145
|
+
- **状态管理**: [React Query](https://tanstack.com/query) - 强大的数据同步库
|
|
146
|
+
- **HTTP 客户端**: [Axios](https://axios-http.com/) - 基于 Promise 的 HTTP 库
|
|
147
|
+
- **国际化**: [React-i18next](https://react.i18next.com/) - React 的国际化框架
|
|
148
|
+
- **包管理**: [pnpm](https://pnpm.io/) - 快速、节省磁盘空间的包管理器
|
|
149
|
+
|
|
150
|
+
## 🔧 自定义配置
|
|
151
|
+
|
|
152
|
+
### Rsbuild 配置
|
|
153
|
+
|
|
154
|
+
编辑 `packages/main/rsbuild.config.ts` 来自定义构建配置:
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
import { defineConfig } from '@rsbuild/core';
|
|
158
|
+
import { pluginReact } from '@rsbuild/plugin-react';
|
|
159
|
+
|
|
160
|
+
export default defineConfig({
|
|
161
|
+
plugins: [pluginReact()],
|
|
162
|
+
// 你的自定义配置
|
|
163
|
+
});
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Tailwind CSS 配置
|
|
167
|
+
|
|
168
|
+
编辑 `packages/main/tailwind.config.js` 来自定义样式:
|
|
169
|
+
|
|
170
|
+
```javascript
|
|
171
|
+
module.exports = {
|
|
172
|
+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
173
|
+
theme: {
|
|
174
|
+
extend: {
|
|
175
|
+
// 你的自定义主题
|
|
176
|
+
},
|
|
177
|
+
},
|
|
178
|
+
plugins: [],
|
|
179
|
+
};
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### TypeScript 配置
|
|
183
|
+
|
|
184
|
+
编辑 `packages/main/tsconfig.json` 来调整 TypeScript 设置。
|
|
185
|
+
|
|
186
|
+
## 🌍 国际化
|
|
187
|
+
|
|
188
|
+
项目内置了完整的国际化支持:
|
|
189
|
+
|
|
190
|
+
1. **语言文件位置**: `packages/main/public/locales/`
|
|
191
|
+
2. **支持语言**: 中文、英文、德文、西班牙文、法文
|
|
192
|
+
3. **使用方式**:
|
|
193
|
+
```tsx
|
|
194
|
+
import { useTranslation } from 'react-i18next';
|
|
195
|
+
|
|
196
|
+
const { t } = useTranslation();
|
|
197
|
+
return <div>{t('welcome')}</div>;
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## 📦 部署
|
|
201
|
+
|
|
202
|
+
### 构建项目
|
|
203
|
+
```bash
|
|
204
|
+
pnpm build
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### 静态部署
|
|
208
|
+
构建后的文件在 `packages/main/dist` 目录中,可以部署到任何静态文件服务器。
|
|
209
|
+
|
|
210
|
+
### 环境配置
|
|
211
|
+
项目支持多环境配置:
|
|
212
|
+
- 开发环境: `pnpm start`
|
|
213
|
+
- 测试环境: `pnpm start:test`
|
|
214
|
+
- 预发布环境: `pnpm start:pre`
|
|
215
|
+
- 生产构建: `pnpm build`
|
|
216
|
+
|
|
217
|
+
## 🤝 贡献
|
|
218
|
+
|
|
219
|
+
欢迎提交 Issue 和 Pull Request!
|
|
220
|
+
|
|
221
|
+
1. Fork 项目
|
|
222
|
+
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
|
223
|
+
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
|
224
|
+
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
|
225
|
+
5. 开启 Pull Request
|
|
226
|
+
|
|
227
|
+
## 📝 更新日志
|
|
228
|
+
|
|
229
|
+
### v1.0.0
|
|
230
|
+
- 🎉 初始版本发布
|
|
231
|
+
- ✨ 支持 React 18 + Rsbuild
|
|
232
|
+
- 🎨 集成 Tailwind CSS + Ant Design
|
|
233
|
+
- 🌍 内置国际化支持
|
|
234
|
+
- 📱 响应式设计
|
|
235
|
+
|
|
236
|
+
## 📄 许可证
|
|
237
|
+
|
|
238
|
+
[MIT](LICENSE) © [Your Name]
|
|
239
|
+
|
|
240
|
+
## 🙏 致谢
|
|
241
|
+
|
|
242
|
+
- [Rsbuild](https://rsbuild.dev/) - 极速的 Web 构建工具
|
|
243
|
+
- [React](https://reactjs.org/) - 用于构建用户界面的 JavaScript 库
|
|
244
|
+
- [Ant Design](https://ant.design/) - 企业级 UI 设计语言
|
|
245
|
+
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
<div align="center">
|
|
250
|
+
|
|
251
|
+
**如果这个项目对你有帮助,请给一个 ⭐️ Star ⭐️**
|
|
252
|
+
|
|
253
|
+
Made with ❤️ by [Your Name]
|
|
254
|
+
|
|
255
|
+
</div>
|
package/USAGE.md
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# 使用指南
|
|
2
|
+
|
|
3
|
+
## 快速创建项目
|
|
4
|
+
|
|
5
|
+
### 1. 运行脚手架
|
|
6
|
+
```bash
|
|
7
|
+
npx create-tengits-app
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
### 2. 输入项目信息
|
|
11
|
+
```
|
|
12
|
+
🚀 欢迎使用 Tengits 前端脚手架!
|
|
13
|
+
|
|
14
|
+
请输入项目名称(默认: my-react-app): my-project
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### 3. 等待创建完成
|
|
18
|
+
脚手架会自动完成以下步骤:
|
|
19
|
+
- ✅ 创建项目目录
|
|
20
|
+
- ✅ 复制模板文件
|
|
21
|
+
- ✅ 配置 package.json
|
|
22
|
+
- ✅ 安装项目依赖
|
|
23
|
+
|
|
24
|
+
### 4. 启动项目
|
|
25
|
+
```bash
|
|
26
|
+
cd my-project
|
|
27
|
+
pnpm start
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## 项目特性
|
|
31
|
+
|
|
32
|
+
生成的项目包含以下特性:
|
|
33
|
+
|
|
34
|
+
### 🛠️ 技术栈
|
|
35
|
+
- **React 18** - 最新的 React 版本
|
|
36
|
+
- **TypeScript** - 类型安全的 JavaScript
|
|
37
|
+
- **Rsbuild** - 快速的构建工具
|
|
38
|
+
- **Tailwind CSS** - 实用优先的样式框架
|
|
39
|
+
- **Ant Design** - 企业级 UI 组件库
|
|
40
|
+
|
|
41
|
+
### 🌟 内置功能
|
|
42
|
+
- ✅ 路由系统 (React Router)
|
|
43
|
+
- ✅ 状态管理 (React Query)
|
|
44
|
+
- ✅ 国际化支持 (i18next)
|
|
45
|
+
- ✅ HTTP 请求 (Axios)
|
|
46
|
+
- ✅ 响应式设计
|
|
47
|
+
- ✅ 深色/浅色主题
|
|
48
|
+
- ✅ TypeScript 完整支持
|
|
49
|
+
- ✅ ESLint 代码规范
|
|
50
|
+
- ✅ PostCSS 样式处理
|
|
51
|
+
|
|
52
|
+
### 📁 目录结构
|
|
53
|
+
```
|
|
54
|
+
my-project/
|
|
55
|
+
├── packages/main/ # 主应用
|
|
56
|
+
│ ├── src/
|
|
57
|
+
│ │ ├── components/ # 可复用组件
|
|
58
|
+
│ │ ├── pages/ # 页面组件
|
|
59
|
+
│ │ ├── utils/ # 工具函数
|
|
60
|
+
│ │ ├── styles/ # 样式文件
|
|
61
|
+
│ │ └── types/ # 类型定义
|
|
62
|
+
│ ├── public/ # 静态资源
|
|
63
|
+
│ ├── rsbuild.config.ts # 构建配置
|
|
64
|
+
│ └── package.json # 包配置
|
|
65
|
+
├── pnpm-workspace.yaml # workspace 配置
|
|
66
|
+
└── package.json # 根配置
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 开发命令
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
# 启动开发服务器
|
|
73
|
+
pnpm start
|
|
74
|
+
|
|
75
|
+
# 构建生产版本
|
|
76
|
+
pnpm build
|
|
77
|
+
|
|
78
|
+
# 预览生产版本
|
|
79
|
+
pnpm preview
|
|
80
|
+
|
|
81
|
+
# 代码检查
|
|
82
|
+
pnpm doctor
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## 环境配置
|
|
86
|
+
|
|
87
|
+
项目支持多环境配置:
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
# 开发环境(默认)
|
|
91
|
+
pnpm start
|
|
92
|
+
|
|
93
|
+
# 测试环境
|
|
94
|
+
pnpm start:test
|
|
95
|
+
|
|
96
|
+
# 预发布环境
|
|
97
|
+
pnpm start:pre
|
|
98
|
+
|
|
99
|
+
# 生产构建
|
|
100
|
+
pnpm build
|
|
101
|
+
pnpm build:test # 测试环境构建
|
|
102
|
+
pnpm build:pre # 预发布环境构建
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 自定义配置
|
|
106
|
+
|
|
107
|
+
### 修改构建配置
|
|
108
|
+
编辑 `packages/main/rsbuild.config.ts`
|
|
109
|
+
|
|
110
|
+
### 修改样式主题
|
|
111
|
+
编辑 `packages/main/tailwind.config.js`
|
|
112
|
+
|
|
113
|
+
### 添加路由
|
|
114
|
+
编辑 `packages/main/src/routes.tsx`
|
|
115
|
+
|
|
116
|
+
### 配置国际化
|
|
117
|
+
添加语言文件到 `packages/main/public/locales/`
|
|
118
|
+
|
|
119
|
+
## 部署
|
|
120
|
+
|
|
121
|
+
### 静态部署
|
|
122
|
+
```bash
|
|
123
|
+
pnpm build
|
|
124
|
+
# 将 packages/main/dist 目录部署到服务器
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Docker 部署
|
|
128
|
+
```dockerfile
|
|
129
|
+
FROM nginx:alpine
|
|
130
|
+
COPY packages/main/dist /usr/share/nginx/html
|
|
131
|
+
EXPOSE 80
|
|
132
|
+
CMD ["nginx", "-g", "daemon off;"]
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## 常见问题
|
|
136
|
+
|
|
137
|
+
### Q: 如何修改项目端口?
|
|
138
|
+
A: 修改 `packages/main/rsbuild.config.ts` 中的 server 配置
|
|
139
|
+
|
|
140
|
+
### Q: 如何添加新的 UI 组件?
|
|
141
|
+
A: 在 `packages/main/src/components/` 目录下创建新组件
|
|
142
|
+
|
|
143
|
+
### Q: 如何配置代理?
|
|
144
|
+
A: 在 `packages/main/rsbuild.config.ts` 中添加 proxy 配置
|
|
145
|
+
|
|
146
|
+
### Q: 如何添加环境变量?
|
|
147
|
+
A: 创建 `.env` 文件或在 rsbuild 配置中定义
|
|
148
|
+
|
|
149
|
+
## 技术支持
|
|
150
|
+
|
|
151
|
+
如需帮助,请:
|
|
152
|
+
1. 查看 [官方文档](https://github.com/your-username/create-tengits-app)
|
|
153
|
+
2. 提交 [GitHub Issue](https://github.com/your-username/create-tengits-app/issues)
|
|
154
|
+
3. 参考 [示例项目](https://github.com/your-username/create-tengits-app/tree/main/examples)
|