# React-Dva技术分享

**Repository Path**: kangkang521/dva-react-demo

## Basic Information

- **Project Name**: React-Dva技术分享
- **Description**: 公司内部组织的React-Dva技术分享会，意在让广大程序员去认识 React、Dva，认识前段框架。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 3
- **Created**: 2018-08-30
- **Last Updated**: 2025-05-28

## Categories & Tags

**Categories**: sample-code

**Tags**: None

## README

# React-Dva技术分享培训

#### 项目介绍
公司内部组织的React-Dva技术分享培训会，意在让广大程序员去认识 React、Dva，认识前段框架。

#### 软件架构
![软件架构说明](https://images.gitee.com/uploads/images/2018/0830/141940_dce422cb_962024.png "前端框架.png")
#### 安装教程
##### 克隆本项目
- 如果直接下载会提示登陆，建议大家用 git clone 的方式进行下载项目
- git clone https://gitee.com/kangkang521/dva-react-demo.git


##### 该工程是依赖于 node.js 环境才能够正常工作，若需要在本地机器上运行本项目，则首先需要安装 node.js 环境。
- 官方的 node.js 安装包：[node下载地址](https://nodejs.org/en/download/)，大家可以根据自己的机器进行选择适合自己的 node.js 安装包即可。
- 在安装完 node.js 环境之后，可打开命令行，输入 node -v 若能够看到相应的版本信息，那么祝贺你，你已经安装成功；若提示你命令不存在，那么很遗憾，你没有安装成功，仍需要你进行相应的安装。如下图：![node环境检查](https://images.gitee.com/uploads/images/2018/0830/142640_1cedc1f5_962024.png "QQ截图20180830142435.png")
- node.js 环境安装配置成功之后，你可以打开你从 git 拉下的代码的根目录：/dva-react-demo ，然后在此路径下打开命令行，也可以打开命令行之后切到此目录下。接着我们需要执行： **npm install** 命令，这一步是进行本项目的依赖安装，在安装的过程中可能会因网络的原因比较慢，大家需耐心等待。另外如果你执行此命令实在不行，没能够成功安装依赖。那么你可以尝试去更换一下镜像地址，具体操作大家请问度娘，这里就不做具体说明了。
- 若大家按照以上两种方式还是没能够解决问题，还是安装不成功的话，那么大家也可以去了解一下 yarn 这个命令，具体实现，请问度娘。
- 至此你的环境已经搭建好，项目的依赖也已经安装好接下来就可以启动项目了
- 在命令行输入 npm start 若用 yarn 的 则可以输入 yarn start 在第一次启动项目的时候会有一些慢，大家请耐心等待！
- 在等到你的命令行出现以下字样的时候，那么你的项目已经启动成功了。如下图：![启动成功](https://images.gitee.com/uploads/images/2018/0830/143802_8c6e1d2b_962024.png "QQ截图20180830143717.png")
- 项目启动成功之后就可以打开浏览器在上面输入 http://localhost:8000 回车，就可以看到相应的页面了。

#### 使用说明

### 目录结构

```bash
├── /mock/           # 模拟数据的目录
├── /dist/public     # 项目输出目录
├── /public          # 公共文件，编译时copy至dist目录
├── /src/            # 项目源码目录
│ ├── /components/   # UI组件及UI相关方法
│ ├── /layouts/      # 全局公共的布局
│ │ ├── app.js       # 项目的全局布局
│ │ ├── app.less     # 项目的全局布局的样式
│ │ └── index.js     # 项目的入口类
│ ├── /models/       # 全局数据的数据模型目录
│ │ └── app.js       # 数据模型的实现类
│ ├── /pages/        # 包含全部的业务侧的所有及生成路由的文件夹
│ ├── /plugins/      # 全局的插件
│ │ └── onError.js   # 全局错误处理
│ ├── /services/     # 全局数据的数据接口
│ │ ├── app.js       # 数据接口（包含人员信息的接口）
│ ├── /themes/       # 主题
│ │ ├── default.less # 全局样式
│ │ ├── index.less   # 全局样式
│ │ ├── mixin.less   # 全局样式
│ │ └── vars.less    # 全局样式变量
│ ├── /utils/        # 工具函数
│ │ ├── config.js    # 项目常规配置
│ │ ├── index.js     # 工具函数输出的主文件
│ │ ├── request.js   # 异步请求函数
│ │ └── theme.js     # 项目需要在js中使用到样式变量
│ └── global.js      # 全局配置
├── package.json     # 项目信息
├── .eslintrc        # Eslint配置
└── .roadhogrc.js    # roadhog配置
```
#### 联系方式

- 因为本项目是开源的，任何人都可以看到，所以联系方式只留了个人邮箱，希望大家理解
- 邮箱：584021800@qq.com
- 大家若有任何问题都可以以邮件的形式想我提问。
- 如有注册码云账户的人员也可以直接在 [issues](https://gitee.com/kangkang521/dva-react-demo/issues) 上直接进行提问，我会为大家解答。
- 另外大家由邮箱提出的问题，我也会在 [issues](https://gitee.com/kangkang521/dva-react-demo/issues) 进行详细的说明

#### 参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request