飛冰 - ICE Design Pro 使用指南

niceforbear 發布于2019-08-23 10:39 / 1801人閱讀

摘要：為此，我們推出了使用指南，在模板的基礎上，提供了示例注冊登錄數據方案實踐權限管理到如何部署等等解決方案，提高模板的實用性和完善性。

寫在前面：

目前在飛冰中，我們提供了 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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