Skip to content
project template-react&&dva
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
webpack
.babelrc
.editorconfig
.eslintrc
.gitignore
README.md
index.html
package.json
postcss.config.js
yarn.lock

README.md

react-with-dva-template

项目模版-react&&dva

更新日志

2017/09/25 升级dva@2dva@1.x请转移至该分支

技术选型

依然采用react全家桶,并尝试引入 dva 简化redux的使用。
UI 框架选择了棒的不行的 ant design
数据请求库使用axios,当然可以选用其他。

目录结构

大体上保持了dva官方推荐的目录结构。

├── src/
│   ├── components/     # 组件
│   ├── config/         # 一些配置项
│   ├── models/         # 数据模型
│   ├── routes/         # 路由组件(页面维度)
│   ├── services/       # 数据接口
│   ├── utils/          # 工具
│   ├── app.js          # 入口文件
│   ├── createApp.js
│   └── router.js       # 路由配置
├── webpack/            # webpack配置
├── index.html
├── package.json

在组件的设计上,应该明确componentsroutes目录中的组件职责:

  • 尽量保持components中的为纯组件(PureComponent),不直接通过connect订阅model上的数据,一般来说它所需要的数据都来源于props
  • routes是页面维度的组件,它的职责是绑定相关联的model数据,以数据容器的角色包含其它子组件。

接口服务都放在services中,再由model来调用。

合理的设计model中的state

使用

npm:
  npm install
  npm run dll
  npm run dev
  
yarn:
  yarn
  yarn dll
  yarn dev

在启动dev任务之前请务必先运行一次dll任务。该功能可以大大提升webpack打包性能,关于dll plugin的详细资料可查看 dll plugin

其他

关于项目的一些配置项

  • webpack的配置:
    • webpack.config.js是基础配置,一般情况下不需要更改;
    • prod配置中,publicPath属性区分了测试和线上环境的静态资源引用路径,请按需替换;
    • dll配置用来生成一个单独的、平时不需要更改的vendor.min.js,在业务代码之前引入,只有在后续升级或者增删了主要依赖包才需要重新执行dll(大部分情况下后续更新的都是业务代码,更新依赖包的频次远远小于业务),这样一来只要这部分不发生改变,我们平时更新业务代码时这部分是不需要更迭版本的,利用原有缓存而不需要用户重新下载。
You can’t perform that action at this time.