项目脚手架

TODO:

• Fractal Project Structure example in route: game
• common antd Modal

---

• ICON
• 高清解决方案
• antd mobile lib
• react-router-redux
• 分模块加载路由
• react helmet
• layout
• persist store
• react router redux
• Lint错误自动修复
• indexRoute
• mock
• reselect
• dva loading
• i18n
• custome webpack config 参考
• bundled js hash name 参考
• dist deploy test
• i18n with moment format auto config

Deprecated Techs:

• seamless immutable why?

目录导航

1. 技术栈
2. 配置要求
3. 安装
4. 组织结构
5. 开发工具
6. 路由
7. 部署

技术栈

• dva
• ant mobile
• dva-cli
• redux
• react-router
• webpack
• eslint
• roadhog

配置要求

• node ^6.8.1(更低版本未测试)
• yarn ^0.17.0（推荐） or npm ^3.0.0

快速开始

请确认系统环境符合配置要求，然后:

安装

安装npm packages. 推荐使用 Yarn, 当然 npm install 同样奏效。

$ yarn install    
$ yarn start      

成功的话 将会有项目页面在浏览器弹出，并且在terminal显示：

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

While developing, you will probably rely mostly on npm start; however, there are additional scripts at your disposal:

npm run <script>	Description
start	运行项目 localhost:8000. dev环境热替换模块自动开启
build	输出静态文件 (~/dist).
lint	Lint 所有的 .js 文件.
lint:fix	修复Lint错误(未完成！) Read more on this.

组织结构

路由组织参考： fractal 结构, 参考阅读关于fractal by Justin Greenberg.

.
├── (dist)                   # run build 后生成的静态文件 
├── mock                     # 开发用mock
├── public                   # 不被引入的静态文件
├── src                      # Application source code
│   ├── index.js             # 初始化dva的入口文件
│   ├── index.css            # 全局css
│   ├── router.js            # 顶级路由和全局路由定义，所有的子路由也将在此引用
│   ├── containers           # Global Reusable Container Components
│   ├── assets               # 需要import的项目通用静态文件
│   │   └── layouts          # 模块文件夹
│   │      └── xxx.jpg       # 静态文件
│   │   └── users          
│   ├── utils                # 项目通用工具函数
│   │   └── xxxparser.js     # 某转换方法
│   ├── components           # 项目级通用组件，除layout外应都是pure component
│   │   ├── modal            # 通用组件示例 
│   │   │   ├── index.js     # 通用组件文件
│   │   ├── Layouts          # 布局组件
│   │   │   ├── MainLayout.js 
│   │   │   ├── mainL.css    
│   │   │   ├── LoginLayout  
│   │   │   └── LogLayout.css
│   ├── routes               # 基于页面路由的模块
│   │   ├── Home             # 首页木块
│   │   │   ├── index.js     # Route定义
│   │   │   ├── assets       # 静态文件夹
│   │   │   ├── components   # pure 组件夹
│   │   │   ├── models       # dva的model定义文件夹
│   │   │   ├── containers   # container组件文件夹
│   │   │   ├── constants    # 常量文件夹
│   │   │   └── routes **    # 子路由（如果有）
│   │   └── user             # 另一个路由
│   │       ├── ...
│   ├── services             # 获取数据部分
│   │   ├── users.js         # users部分的数据获取
└── tests                    # 单元测试(未完成)

开发

开发工具

**推荐使用 Redux DevTools Chrome Extension.

路由

react-router 我们没有使用jsx路由，而是使用了plain route. 参考： 路由定义

部署

npm run build

静态部署

使用nginx, 将路由请求指向 ~/dist/index.html ，由react router负责后续路由。 参考文件 helpful. The Express server that comes with the starter kit is able to be extended to serve as an API or whatever else you need, but that's entirely up to you.

全局变量

Variable	Description
process.env.NODE_ENV	the active NODE_ENV when the build started

Styles

less,scss和css文件都可以直接被import. 框架已经直接定义了css modulus, 可直接起简单类名，无需关心命名空间问题

npm packages

• lodash js 工具库
• moment 时间格式和时区管理
• reselect 计算和缓存衍生数据, 为什么要使用reselect
• react-i18next 国际化与多语言