# one_project

**Repository Path**: chu25-08/one_project

## Basic Information

- **Project Name**: one_project
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-02
- **Last Updated**: 2020-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: 郑刘利
 * @Date: 2020-03-03 15:48:57
 * @LastEditors: 郑刘利
 * @LastEditTime: 2020-03-10 16:29:52
 * @Description: project description
 * @FilePath: \one_project\README.md
 -->


## 如何开始

* `yarn start`  开发环境下启动项目
* `yarn build`  打包成部署文件
* `yarn test`  运行测试

## 项目结构和组件命名规则

### 代码分离与组件的分组
所有的组件都存放在`components`目录下，并按照`模块/功能`分组文件，组件如果由多个文件构成将组件以及相关文件放在一个同名文件夹当中。测试文件与源码放在同一目录，如`Form.jsx` 的测试文件可以命名为`Form.spec.jsx`

```
src
└─ components
  └─ User
    ├─ Form
    │ ├─ Form.jsx
    │ ├─ Form.spec.jsx
    │ └─ Form.css
    └─ List.jsx
```

### UI组件 
在`components`中使用一个单独的`UI`文件夹来存放公用的组件，UI组件作为公用组件不属于任何模块，其内部也不涉及任何的业务逻辑，例如`Button, Input, Select`等

### 组件的命名
为了方便查找和避免冲突，组件的命名必须在应用中清晰且唯一。
用基于`src`或者`components`目录的相对路径为组件命名,基本上一个组件的路径为 `components/User/List.jsx`将会被命名为`UserList`.
当文件名和所在目录重名时，我们不必再次重复，例如`components/User/Form/Form.jsx`命名为`UserForm`而不是`UserFormForm`。

### screens目录
界面是你用组件为应用程序组合成的一个的页面，理想状况下，界面应该不包含任何的逻辑只是功能组件。 
我们将界面(Screens)保存在src根目录下单独的文件夹中，它们按路由(route)定义分组而不是模块：
```
src
├─ components 
└─ screens
  └─ User
    ├─ Form.jsx
    └─ List.jsx
```

### 重述
* 展示组件(Presentational component)和容器组件(container component)都应该保存于 src/components目录
* 按模块/功能分类组件，如User/List
* 将通用组件存于src/components/UI目录
* 保持界面(screens)简单，结构和代码最小
* 根据路由定义为screens分组，路由 /user/list对应的界面(screen)位于/src/screens/User/List.jsx
* 组件依据和component或src相对路径来命名，鉴于此，位于src/components/User/List.jsx应该命名为UserList，位于src/screens/User/List应该命名为ScreensUserList
* 组件文件名和所在文件夹重名时，组件名不需再重复，位于src/components/User/List/List.jsx的组件应该命名为UserList而不是UserListList

## 项目结构说明


## Mock数据
本地模拟数据使用Mockjs生成，模拟数据代码保存在mock目录下
[Mockjs文档](https://github.com/nuysoft/Mock/wiki)