title:
order: 1

category: ICE Design Pro

基于海量高质量可复用区块，通过 GUI 工具快速搭建的一套中后台模板。

开始使用 - 图1

特性

  • 专业的设计支持: ICE Design
  • 成熟的基础组件: ICE Component
  • 丰富的业务模块: ICE Block
  • 完善的开发工具: Iceworks

技术点

  • icedesign
  • react
  • redux
  • redux-thunk
  • react-router-dom v4
  • axios
  • webpack v4
  • etc…

功能

按照 Dashboard 综合页和 Block 分类进行展示

  1. - 登录/注册
  2. - Dashboard
  3. - 图表页
  4.   - 图表列表
  5. - 表格页
  6.   - 基础表格
  7.   - 展示型表格
  8.   - 表格列表
  9. - 列表页
  10.   - 文章列表
  11.   - 卡片列表
  12.   - 图文列表
  13. - 内容页
  14.   - 基础详情页
  15.   - 条款协议页
  16.   - 进度展示页
  17. - 结果页
  18.   - 成功
  19.   - 失败
  20. - 异常
  21.   - 403 无权限
  22.   - 404 找不到
  23.   - 500 服务器出错
  24.   - 内容为空

目录结构

  1. ice-design-pro
  2. ├── build       // 打包资源
  3. ├── mock        // 模拟数据
  4. ├── public      // 静态资源
  5. ├── src
  6. │   ├── api                // 接口定义
  7. │   ├── components         // 公共组件
  8. │   ├── layouts            // 通用布局
  9. │   ├── pages              // 页面
  10. │   ├── store              // 全局 store
  11. │   ├── utils              // 工具函数
  12. │   ├── configureStore.js  // redux 入口配置
  13. │   ├── reducers.js        // reducers 入口配置
  14. │   ├── index.js           // 应用入口
  15. │   ├── menuConfig         // 导航配置
  16. │   ├── routerConfig       // 路由配置
  17. │   └── router.jsx         // 路由配置
  18. ├── tests                  // 测试
  19. ├── .gitignore             // git 忽略目录配置
  20. ├── .editorconfig          // 代码风格配置
  21. ├── .eslintignore          // eslint 忽略目录配置
  22. ├── .eslintrc              // eslint 配置
  23. ├── package.json           // package.json
  24. └── README.md              // 项目说明

使用

  1. (推荐) GUI 工具使用: 下载 Iceworks
    开始使用 - 图2

  2. CLI 命令使用:

  1. $ npm start      // 启动预览服务器
  2. $ npm run build  // 构建