寫在前面：
目前在飛冰中，我們提供了 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 // 構建
複製程式碼文件
相關資訊
- 官方網站：飛冰-讓前端開發簡單而友好
- 下載 Iceworks：alibaba.github.io/ice/icework…
- Github：github.com/alibaba/ice
- 聯絡 & 招聘
ice-admin[at]alibaba-inc.com - 飛冰群二維碼：