飞冰 - ICE Design Pro 使用指南

niceforbear 发布于2019-08-23 10:39 / 1894人阅读

摘要：为此，我们推出了使用指南，在模板的基础上，提供了示例注册登录数据方案实践权限管理到如何部署等等解决方案，提高模板的实用性和完善性。

写在前面：

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

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

快速了解

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

专业的设计支持: ICE Design

成熟的基础组件: ICE Component

丰富的业务区块: ICE Block

完善的开发工具: Iceworks

功能

注册登录

权限管理

登录授权

菜单授权

路由授权

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               // 项目说明

使用

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

CLI 命令使用:

</>复制代码 
$ npm start      // 启动预览服务器
$ npm run build  // 构建

文档

开始使用

布局

菜单设计

路由设计

新增页面

Mock方案

数据方案

权限管理

构建发布

相关信息

官方网站：飞冰-让前端开发简单而友好

下载 Iceworks：https://alibaba.github.io/ice...

Github：http://github.com/alibaba/ice

联系我们 ice-admin[at]alibaba-inc.com

飞冰群二维码：

GPU云服务器云服务器飞冰 Design Ant Design Fusion Design

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96554.html

飞冰 2.0 正式发布并支持 Vue 项目开发

摘要：距离正式版发布又过了两个月，飞冰迎来了大版本的更新。飞冰是什么详细的飞冰背景和介绍等，请参照正式版发布的介绍，这里不再赘述。飞冰带来了什么支持项目开发千呼万唤始出来。其次，已经进行全面升级，支持自定义物料源项目识别等功能和相关逻辑处理。距离 1.0 正式版发布又过了两个月，飞冰迎来了 2.0 大版本的更新。飞冰 2.0 是什么? 详细的飞冰背景和介绍等，请参照 1.0 正式版发布的...

邱勇 2019-08-22 17:06 评论0 收藏0
Iceworks 2.7.0 发布，海量图表供你选择

摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...

gitmilk 2019-08-23 11:37 评论0 收藏0
Iceworks 2.7.0 发布，海量图表供你选择

摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...

ymyang 2019-07-01 10:36 评论0 收藏0