%20(2).svg)
项目简介
这是一个基于 mobx、react、react router、umi 以及 TypeScript 构建的 React 前端项目。选用 antd 和 teaness 作为组件库，致力于打造功能丰富、结构清晰且易于维护的前端应用。
项目的主要特性和功能
- 先进技术栈：运用
mobx进行状态管理，react router处理路由，umi作为开发框架，TypeScript增强类型检查，提高开发效率与代码质量。 - 丰富组件库：集成
antd和teaness组件库，提供多样 UI 组件，满足不同业务需求。 - 菜单动态加载：通过特殊的 url 标识与菜单结合，实现组件动态加载，增强应用灵活性。
- 环境变量配置：可通过环境变量配置
google analytics、AES 秘钥、sentry DNS等，便于不同环境定制。
安装使用步骤
安装依赖
在项目根目录下执行 npm i 安装项目所需依赖。
运行项目
执行 npm run start 启动项目。
提交代码
遵循 https://www.conventionalcommits.org/ 规范，也可使用 npm run commit 快速格式化提交。
构建与发布
- 执行
npm run release生成 tag。 - 执行
npm run build进行项目构建。 - 若有
sentry启用需求，需在项目下添加.sentryclirc文件，格式如下： ```toml [defaults] url = sentry地址 project = sentry项目名 org = sentry
[auth] token = 授权token ```
环境变量配置
构建环境变量
UA：google analytics，默认无（不开启 google analytics）。AES：AES 秘钥，默认 test。DSN：sentry DNS，默认无（不开启 sentry）。
其他环境变量
可创建 .env.local 文件覆盖 umi 环境变量，具体参考 umi 环境变量。
开发环境配置
在 vscode settings 中可配置如下内容：
javascript
{
"prettier.eslintIntegration": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true },
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}
组件用例
组件库地址： - 外网，需翻墙加速 teaness.org - 内网，隐身模式访问 teaness.org
菜单动态加载组件
通过特殊的 url 标识与菜单结合，url 设计：component:{block组件}({注入的组件props})path={url路径}。
例如：component:AutoGenPage({"type": "cnt"})path=cnt
常见问题解答（FAQ）
默认是开启 mock 的，若需要关闭，请创建 .env.local 文件，并添加 mock=none。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】