飛冰 - ICE Design Pro 使用指南

時間 2019-11-07

標籤 ice design pro 使用指南简体版

原文原文鏈接

寫在前面：

目前在飛冰中，咱們提供了 21 套模板(後續會持續的增長)，能夠在 Iceworks 的模板界面根據需求選擇合適的模板進行初始化項目，而後基於區塊快速搭建頁面進行二次開發，減小各類環境配置和 UI 編寫的時間，從而提升開發效率。前端

然而，這些模板或多或少都有各自的模板特徵，基於不一樣的行業領域，其模板風格，佈局方式也不盡相同，但主要都是 UI 爲主。在模板中設計中，咱們儘可能保持模板的輕量，由於業務的定製性太強，很難覆蓋到具體的場景。但在實際應用中，咱們收到不少用戶的反饋，UI 僅是開發中的一小步，目前 Iceworks 能有效的減小環境配置和 UI 編寫的時間，可是接下來如何基於模板結合業務進行二次開發，好比數據方案，Mock 方案，權限方案等等一系列問題纔是真正的關鍵問題所在。爲此，咱們推出了《Ice Design Pro 使用指南》，在 UI 模板的基礎上，提供了 CRUD 示例、註冊登陸、數據方案、Mock 實踐、權限管理、到如何部署等等解決方案，提升模板的實用性和完善性。react

快速瞭解

基於海量高質量可複用區塊，經過 GUI 工具快速搭建的一套中後臺模板webpack

專業的設計支持: ICE Design
成熟的基礎組件: ICE Component
豐富的業務區塊: ICE Block
完善的開發工具: Iceworks

功能

註冊登陸
權限管理ios
- 登陸受權
- 菜單受權
- 路由受權
Redux 集成
Mock 方案
CRUD 示例
Code Splitting
國際化

技術點

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

頁面

按照 Dashboard 綜合頁和 Block 分類進行展現git

- 登陸/註冊
- 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  // 構建

飛冰 - ICE Design Pro 使用指南

寫在前面：

快速瞭解

功能

技術點

頁面

目錄結構

使用

文檔

相關信息