vite + react + ts + redux template
git clone git@github.com:qqxs/react-antd-typescript-starter.git
cd react-antd-typescript-starter
pnpm install
# 安装项目依赖
# only allow pnpm
pnpm install
# 开启开发环境react 编译
# start development environment
pnpm run dev
# 开始编译生产环境
# production environment
pnpm run build
# 开始编译生产环境并输出分析
# production environment analyzer
pnpm run analyzer
# 对部分不符合eslint 语法进行修复
# 注意⚠️: 不是所有的错误都会修复,部分还是要手动修复
# eslint fix code
pnpm run fix
# 进行eslint语法检查, 如果有错会在控制中指出
# eslint lint code
pnpm run lint
# 使用prettier 代码进行格式化
# prettier format code
pnpm run fmt
# test
pnpm run test
# 首先要安装nginx镜像
# docker nginx deploy
# http://localhost:8000
# docker-compose up -d
docker compose up -d
.
├── assets # @/assets/xxx assets source
│ ├── FE.png
│ └── react.svg
├── components # @/components common components
│ ├── Auth # auth
│ ├── ErrorBoundary # ErrorBoundary
│ └── Layout # layout
├── constant # @/constant constant
├── hooks # @/hooks
│ ├── useTheme.ts # theme hooks
│ └── redux.ts # redux hooks
├── main.tsx # entry
├── services # @/services api
├── pages # pages
│ ├── error # error page
│ ├── home # home page
│ ├── login # login page
│ └── register # register page
├── router.tsx # router tree
├── sentry.ts # sentry config
├── store # redux store
│ ├── index.ts
│ └── features # redux state
├── styles
│ ├── themes # antd theme file
│ └── theme.scss
├── utils
│ ├── Axios.ts # axios
│ └── auth.ts
└── vite-env.d.ts
自定义组件放在src/components
下
Place custom components under src/components
如果需要修改antd5 主题,请更改src/styles/themes下文件
If it is necessary to modify the antd5 theme, Please modify the src/styles/themes file.
// https://ant.design/docs/react/customize-theme-cn
// default.scss
:root {
--color-primary: #00b96b; // -> colorPrimary: #00b96b
--border-radius: 4px; // -> borderRadius: 2px
}
scripts/sass-to-json.ts 转换 src/styles/themes下文件为下面对象格式
{
"theme" {
"tokens": {
"dark": {
"colorPrimary": "#000",
"borderRadius": "4px",
},
"default": {
"colorPrimary": "#00b96b",
"borderRadius": "4px"
}
},
"vars": {
"dark": " --color-primary: #000; --border-radius: 4px;",
"default": " --color-primary: #00b96b; --border-radius: 4px;"
}
}
}
css 变量在切换主题时自动注入到 head
下,保证 antd@5.x 主题 token 变量和css 变量对应
head
下 style
标签
<!-- $____theme____$ 是唯一id -->
<style id="$____theme____$" data-theme="default">
:root {
--color-primary: #00b96b;
--border-radius: 4px;
}
</style>
警告
在vite.config.ts中开启OPEN_SENTRY=true
, 并在src/sentry.tsx 中配置 __DSN__
。