# why-react

**Repository Path**: liu_qiao_xue/why-react

## Basic Information

- **Project Name**: why-react
- **Description**: vite+react+ts
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-07
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Yarn dev

- 模版：使用的是 vite 的官方模版 react 17+ typescript 4+
`yarn create vite  why-react --template react-ts`
- less: 项目中 less 文件的命名都要以 module.less 结尾
`yarn add less -D`
- git 代码提交校验
`yarn add yorkie lint-staged -D`
使用的 yorkie 没有使用 husky,yorkie 是 yyds fork husky 出来的, 然后做了一些定制化的改动，使得钩子能从 package.json 的 "gitHooks"属性中读取。
- eslint 多人代码规范
`yarn add eslint -D`
- 然后终端运行: `npx eslint --init`,项目根目录会自动新建.eslintrc.js文件
- 代码格式化prettier `yarn add prettier -D`
- tyleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint 类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误 `yarn add stylelint stylelint-config-standard -D`
- 新建.stylelintrc.js 配置

## 项目目录划分

- components 公共组件
- materials 业务公共组件
- hooks 自定义 hooks
- pages 页面组件
- service 接口定义
- utils 工具类

## json-server Mock数据

- yarn add json-server -D

```js
mkdir mock
cd mock
touch db.json
```

- 在 package.json 中的 scripts 中添加 `"mock": "json-server mock/db.json --port 3008"`
- 运行命令 `yarn mock` 就可以在控制台成功访问到db.json 中配置的接口数据

## 请求封装

- 注意：process.env 要替换成 import.meta.env
- 新建config.ts 全局的配置信息
- 网络请求使用umi-request 这个库 api 文档: https://github.com/umijs/umi-request
- `npm install umi-request --save`
- 新建utils文件夹，新建request.ts

## 定义接口

- 新建services文件夹，新建login.ts