# react-web-template

**Repository Path**: dongzi1998/react-web-template

## Basic Information

- **Project Name**: react-web-template
- **Description**: react前端模板项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-27
- **Last Updated**: 2025-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-web-template

## 脚手架

```shell
# 创建基于vite的react-ts项目
yarn create vite react-web-template \
--template react-ts
```

## 依赖

```shell
yarn add @types/node
# 路由：React-router
yarn add react-router-dom
# UI组件库：antd
yarn add antd
# 图标库：react-icons,@ant-design/icons
yarn add react-icons
yarn add @ant-design/icons
# 图表库：antv
yarn add @ant-design/charts
# hooks工具库：ahooks
yarn add ahooks
# http请求库：axios
yarn add axios
# css扩展：less
yarn add -D less
# 全局state管理：redux
yarn add @reduxjs/toolkit react-redux
# Postcss插件：tailwindcss
yarn add tailwindcss  --dev
# 图表库: echarts
yarn add echarts-for-react echarts
# 轮播图
yarn add swiper

# 检测设备：react-device-detect
yarn add react-device-detect
# cmdk: react-cmdk
yarn add react-cmdk
# 数字过渡动画: react-countup
yarn add react-countup
# 顶部进度条：@tanem/react-nprogress
yarn add @tanem/react-nprogress
# 画板：excalidraw,tldraw
yarn add @excalidraw/excalidraws
yarn add tldraw
# 流程图：@xyflow/react
yarn add @xyflow/react
# 可视化编辑器：puck
yarn add @measured/puck prop-types
# 块编辑器：editorjs
yarn add @editorjs/editorjs
# 数据大屏：DataV-React
yarn add @jiaminghi/data-view-react
# 动态背景：uvcanvas
yarn add uvcanvas
# 骨架屏：react-content-loader
yarn add react-content-loader
# 动画库：framer-motion
yarn add framer-motion
# 虚拟列表：rc-virtual-list
yarn add rc-virtual-list
# CSS in JS: @emotion/css @emotion/styled @emotion/react
yarn add @emotion/css @emotion/styled @emotion/react
# 国际化：
yarn add i18next
yarn add react-i18next
yarn add i18next-browser-languagedetector
# 移动端调试: 
yarn add vconsole
# Json显示器：@uiw/react-json-view
yarn add @uiw/react-json-view
# 代码编辑器: ace
yarn add react-ace ace-builds
# 文件保存: file-saver
yarn add file-saver @types/file-saver
# Dom转图片: dom-to-image
yarn add dom-to-image @types/dom-to-image

```

## 基础配置

### tailwindcss

```shell
yarn tailwindcss init
```

```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

```ts
// vite.config.ts
import tailwindcss from "tailwindcss"

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        tailwindcss,
      ]
    }
  },
  ...
})
```

```css
/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### vite

配置alias

```ts
export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        }
    },
    ...
})
```


#### eslint

允许使用@ts-ignore

```ts
// 
export default tseslint.config({ignores: ['dist']}, {
    extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], languageOptions: {
        // ...
    }, plugins: {
        // ...
    }, rules: {
        // ...
        '@typescript-eslint/ban-ts-comment': 'off', // 允许 @ts-ignore
    },
},)
```

## 初始化目录和文件

```shell
# 静态资源
mkdir src/assets
# 工具包
mkdir src/utils
# 全局State
mkdir src/store
mkdir src/store/user
mkdir src/store/system
# 服务
mkdir src/service
# 组件
mkdir src/components
# 布局
mkdir src/layout
# 国际化
mkdir src/local
# 页面
mkdir src/pages
# 路由
mkdir src/router

touch src/utils/request.ts
touch src/store/store.ts
touch src/store/user/index.ts

```
## 规范

CSS

- 以索引器形式引用CSS Module类，示例：`styles["className"]`
- 小驼峰方式命名CSS类，示例：`.userList`
- CSS属性排列规则
    - 显示与浮动（display, float）
    - 定位（position）
    - 尺寸（dimensions）
    - 盒子属性（margin、padding、border、outline）
    - 字体（typographic）
    - 背景（background）
    - 其他（opacity、cursor、content）

State

- 系统相关state维护至 [store.system](src/store/system/index.ts)
- 用户相关state维护至 [store.system](src/store/user/index.ts)