qqxs / react-antd-typescript-starter

vite + react + ts + redux template

react-antd-typescript-starter

vite + react + ts + redux template

Use

git clone [e-mail]:qqxs/react-antd-typescript-starter.git

cd react-antd-typescript-starter

pnpm install

Scripts

# 安装项目依赖
# 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

src

.
├── assets      # @/assets/xxx assets source
│   ├── FE.png
│   └── react.svg
├── components  # @/components common components
│   ├── Auth    # auth
│   ├── ErrorBoundary  # ErrorBoundary
│   └── Layout  # layout
├── constant    # @/constant constant
├── hooks       # @/hooks
│   └── redux.ts # redux hook
├── main.tsx    # entry
├── services    # @/services  api
├── pages       # pages
│   ├── error   # error page
│   ├── home    # home page
│   ├── login   # login page
│   └── register
├── router.tsx  # router tree
├── sentry.ts   # sentry config
├── store       # redux store
│   ├── index.ts
│   └── reducer
├── styles
│   ├── antd-theme.scss # antd theme
│   └── theme.scss  # custom theme
├── utils
│   ├── Axios.ts   # axios
│   └── auth.ts
└── vite-env.d.ts

Components

自定义组件放在src/components下

Place custom components under src/components

Themes

如果需要修改antd5 主题，请更改src/styles/antd-theme.scss文件

如果使用less, 请安装 less-vars-to-js 按照下面 👇 代码自行调试。

import lessToJs from 'less-vars-to-js';
import { lowerCamel } from '@skax/camel';
import fs from 'fs';

/**
 * less 变量转成 json 格式
 * Convert the less variable to JSON format
 *
 * @example
 *
 * lessVar2JSON()  //  -> {"colorPrimary": "#00b96b, borderRadius: '2px'}
 *
 * @returns {Object}
 */
function lessVar2JSON() {
  // Read the less file in as string
  const paletteLess = fs.readFileSync('./src/styles/antd-theme.less', 'utf-8');
  // Pass in file contents
  const palette = lessToJs(paletteLess, {
    resolveVariables: true,
    stripPrefix: true,
  });

  return Object.keys(palette).reduce((pre, cur) => {
    pre[lowerCamel(cur, '-')] = palette[cur];
    return pre;
  }, {});
}
export default lessVar2JSON;

Api

gin_serve api

Sentry

在vite.config.ts中开启OPEN_SENTRY=true, 并在src/sentry.tsx 中配置 __DSN__。