• 1. 前言
• 2. 项目结构
  • 2.1. mock
  • 2.2. node_modules
  • 2.3. src
    • 2.3.1. assets
    • 2.3.2. components
    • 2.3.3. configs
    • 2.3.4. models
    • 2.3.5. routes
    • 2.3.6. services
    • 2.3.7. utils
    • 2.3.8. index.html
    • 2.3.9. index.js
    • 2.3.10. index.less
    • 2.3.11. router.js
  • 2.4. .editorconfig
  • 2.5. .eslintignore
  • 2.6. .eslintrc
  • 2.7. .gitignore
  • 2.8. .gitlab-ci.yml
  • 2.9. npm-debug.log
  • 2.10. package.json
  • 2.11. proxy.config.js
  • 2.12. webpack.config.js

前言

　　本篇简单对Dva.js项目的工程结构进行说明，具体的概念，设计，文档，详见Dva.js官网

项目结构

mock

属于前后端分离的一种实践，在后端接口未完全实现时，前端可通过mock数据的方式自测。

node_modules

项目依赖采用npm管理，所以来包均在此目录。

src

assets

项目静态资源目录（图片等）

components

无状态组件目录。根据react组件化的要求，该目录下的组件是根据具体业务逻辑进行合理划分，细粒度的无状态组件，业务相关的state交付上层容器组件管理。（当然，在具体实践中，该目录下的组件也可以维护少量的仅组件内部使用的状态，不涉及与后端的业务逻辑交互）

configs

配置文件目录。项目中可能会有一些配置项，统一写在这里方便管理。

models

状态model目录。项目所有状态管理均在此目录。对应是redux概念中的store。

routes

路由配置目录。路由是单页应用中的重要概念。这里统一配置整个项目的所有路由状态。

services

services层目录。这里就是一个“服务”层，负责对后端接口数据的请求和处理。在这里主要可以做两件事：
1.发出异步请求（此处不是直接发出，而是调用了下面的utils层的工具，为的是便于管理http全局状态）
2.对该接口返回的数据做数据适配adaptor，因为后端接口的数据格式、字段名等往往不一定与前端对应，便可以在这里对其做数据适配。

utils

工具函数层。主要是异步请求，全局http状态管理等全局公用的函数工具。

index.html

单页应用的入口html。整个工程仅这一个html文件。

index.js

单页应用入口js。在这里进行dva项目的初始化。可配置全局使用的history类型，接入日志等中间件，做好全局错误状态的拦截，引入上述routes的路由文件，引入项目所有model状态文件，最后启动整个应用。

index.less

全局通用样式配置。典型的有，对body html等元素的margin padding 做统一处理（设置为0，由于这些元素有默认margin padding，防止对后续样式设计产生影响）。

router.js

全局路由状态管理目录。在这里对整个应用的跳转关系进行设置。可以在某个路由上设置进入、离开等钩子函数，做出相应逻辑。

.editorconfig

编辑器统一设置，比如缩进方式等。

.eslintignore

.eslintignore ,如同 .gitignore 一样忽略对于某些文件，文件夹的检查。

.eslintrc

代码风格检查文件。

.gitignore

git版本管理忽略文件，对这里设置的目录不作为代码库的管理内容，推荐使用github上的gitignore项目的统一配置，比较全面。

.gitlab-ci.yml

项目CI持续集成配置文件

npm-debug.log

npm日志

package.json

npm包管理文件

proxy.config.js

项目开发测试服务器dora配置文件

webpack.config.js

webpack打包工具配置文件