Skip to content

Latest commit

 

History

History
168 lines (134 loc) · 6.34 KB

readme.md

File metadata and controls

168 lines (134 loc) · 6.34 KB
Raw

项目脚手架

TODO:

  • 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. 部署

技术栈

配置要求

  • 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