飞冰 - ICE Design Pro 使用指南

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了飞冰 - ICE Design Pro 使用指南相关的知识,希望对你有一定的参考价值。

写在前面:

目前在飞冰中,我们提供了 21 套模板(后续会持续的增加),可以在 Iceworks 的模板界面根据需求选择合适的模板进行初始化项目,然后基于区块快速搭建页面进行二次开发,减少各种环境配置和 UI 编写的时间,从而提高开发效率。

然而,这些模板或多或少都有各自的模板特征,基于不同的行业领域,其模板风格,布局方式也不尽相同,但主要都是 UI 为主。在模板中设计中,我们尽量保持模板的轻量,因为业务的定制性太强,很难覆盖到具体的场景。但在实际应用中,我们收到很多用户的反馈,UI 仅是开发中的一小步,目前 Iceworks 能有效的减少环境配置和 UI 编写的时间,但是接下来如何基于模板结合业务进行二次开发,比如数据方案,Mock 方案,权限方案等等一系列问题才是真正的关键问题所在。为此,我们推出了《Ice Design Pro 使用指南》,在 UI 模板的基础上,提供了 CRUD 示例、注册登录、 数据方案、Mock 实践、权限管理、到如何部署等等解决方案,提高模板的实用性和完善性。


快速了解

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

技术图片


功能

  • 注册登录
  • 权限管理

    • 登录授权
    • 菜单授权
    • 路由授权
  • Redux 集成
  • Mock 方案
  • CRUD 示例
  • Code Splitting
  • 国际化

技术点

  • ice-design
  • react
  • redux
  • redux-thunk
  • react-router-dom v4
  • axios
  • bizcharts
  • webpack v4
  • mock.js
  • etc...

页面

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

- 登录/注册
- Dashboard
- 图表页
  - 图表列表
- 表格页
  - 基础表格
  - 展示型表格
  - 表格列表
- 列表页
  - 文章列表
  - 卡片列表
  - 图文列表
- 内容页
  - 基础详情页
  - 条款协议页
  - 进度展示页
- 结果页
  - 成功
  - 失败
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
  - 内容为空

目录结构

ice-design-pro
├── build       // 打包资源
├── mock        // 模拟数据
├── public      // 静态资源
├── src
│   ├── api                 // 接口定义
│   ├── components          // 公共组件
│   ├── layouts             // 通用布局
│   ├── pages               // 页面
│   ├── store               // 全局 store
│   ├── utils               // 工具函数
│   ├── configureStore.js   // redux 入口配置
│   ├── reducers.js         // reducers 入口配置
│   ├── index.js            // 应用入口
│   ├── menuConfig          // 导航配置
│   ├── routerConfig        // 路由配置
│   └── router.jsx          // 路由配置
├── tests                   // 测试
├── .gitignore              // git 忽略目录配置
├── .editorconfig           // 代码风格配置
├── .eslintignore           // eslint 忽略目录配置
├── .eslintrc               // eslint 配置
├── package.json            // package.json
└── README.md               // 项目说明

使用

  1. (推荐) GUI 工具使用: 下载 iceworks 一键初始化

技术图片

  1. CLI 命令使用:
$ npm start      // 启动预览服务器
$ npm run build  // 构建

文档


相关信息

以上是关于飞冰 - ICE Design Pro 使用指南的主要内容,如果未能解决你的问题,请参考以下文章

https://ice.work/component/affix

新知识笔记

Ant Design Pro —— 开箱即用的中后台解决方案 | 软件推介

014-ant design pro advanced 使用 CLI 工具

ant design pro (十四)advanced 使用 CLI 工具

无法让 @ant-design/pro-layout 的样式与“create-react-app”一起使用