飛冰 - ICE Design Pro 使用指南

摘要： 目前在飛冰中，我們提供了21 套模板(後續會持續的增加)，可以在 Iceworks 的模板介面根據需求選擇合適的模板進行初始化專案，然後基於區塊快速搭建頁面進行二次開發，減少各種環境配置和 UI 編寫的時間，從而提高開發效率。 然而，這些模板或多或少都有各自的模板特徵，基於不同的行業...

目前在飛冰中，我們提供了21 套模板(後續會持續的增加)，可以在 Iceworks 的模板介面根據需求選擇合適的模板進行初始化專案，然後基於區塊快速搭建頁面進行二次開發，減少各種環境配置和 UI 編寫的時間，從而提高開發效率。

然而，這些模板或多或少都有各自的模板特徵，基於不同的行業領域，其模板風格，佈局方式也不盡相同，但主要都是 UI 為主。在模板中設計中，我們儘量保持模板的輕量，因為業務的定製性太強，很難覆蓋到具體的場景。但在實際應用中，我們收到很多使用者的反饋，UI 僅是開發中的一小步，目前 Iceworks 能有效的減少環境配置和 UI 編寫的時間，但是接下來如何基於模板結合業務進行二次開發，比如資料方案，Mock 方案，許可權方案等等一系列問題才是真正的關鍵問題所在。為此，我們推出了 ofollow,noindex">《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// 專案說明
複製程式碼

使用

1. (推薦) GUI 工具使用: 下載 iceworks 一鍵初始化

   

2. CLI 命令使用:

$ npm start// 啟動預覽伺服器
$ npm run build// 構建
複製程式碼