自定義模板顧名思義即是定製自己的模板，相對社群已有的各類 React 模板，大多數是全家桶的形式，內建了很多功能和頁面集合，所謂開箱即用；但在實際使用過程中，我們會發現，下載模板進行相應的初始化之後，在開始業務前，要做的第一件事情就是刪、刪、刪，刪掉不需要的多餘頁面和相應的配置、在刪之前你還需要去了解整個模板的設計思路，不然很可能多刪或者少刪導致專案啟動失敗等等，這裡暫且不討論這類别範本的優缺點。
那有沒有一種解決方案，是可以完全從零開始去自定義一個模板，能按需進行配置生成，答案是有的。Vue 社群在這方面就做的非常好，在 vue-cli 3.0 版本之前，提供了 vuejs-templates，包含了 6 套基礎的模板，在 vue-cli 3.0 中又做了進一步的優化和改進，包括預設預設配置和使用者自定義配置，在使用者自定義配置之後，會詢問是否儲存當前的配置功能為將來的專案配置的預設值，這樣下次可直接使用不需要再次配置，實現一鍵生成、一鍵除錯、一鍵釋出這些快捷的行為，方便開發者將注意力更聚焦於業務層面。
在 Iceworks 2.8.0 之前的版本，已經支援自定義模板功能，但僅限於對 Layout 進行自定義，包含基礎、導航、側邊欄、頁尾等配置，但這顯然是不夠的。在 Iceworks 2.8.0 版本中，增加了高階配置選項，支援按需選擇 Redux 的相關配置功能，如是否需要註冊登入模組，是否需要許可權模組等等，可自由組合，按需生成。
自定義建立流程
在 模板 介面選擇 自定義模板，點選新建彈窗如下，左邊是屬性配置皮膚，右邊是配置的實時效果圖，目前自定義主要包含以下四部分配置
- 基礎配置
- 佈局配置
- 高階配置
基礎配置
基礎配置主要包含佈局容器配置、主題配置、定製皮膚三部分，其中：
- 佈局容器配置有全屏和固寬兩個選項，全屏即 100% 寬度的佈局，固寬預設是 1200px
- 主題配置有深色和淺色兩個選項，對應的是 Layout 部分的主題配置
- 定製皮膚主要是指配置基礎元件的樣式，可以選擇主色和輔色，詳細可以檢視修改主題配色
佈局配置
佈局配置主要包含 頂部導航、側邊導航、頁尾 三部分，只有在啟動的前提下才能配置對應的導航屬性。在某些情況下，可能不需要導航，只要不勾選啟用，則預設不會生成導航部分。可以通過屬性配置組合出不同形式的佈局，以滿足業務場景。
高階配置
高階配置目前主要支援 Redux 的相關配置，可以根據需要按需新增，如果啟用 Redux 配置，則會在專案中生成 Redux 相關的腳手架程式碼，同時可選項包括完整的 註冊登入示例、許可權管理示例 和 Mock 示例 三部分。
使用步驟
1. 屬性配置
在屬性配置皮膚，可以按需進行配置，這裡演示我們使用預設的配置，同時在高階配置裡勾選所有的 redux 配置，這樣生成的專案即是包含完整功能的 Redux 專案。
2. 建立專案
在配置皮膚配置完成後點選儲存，即可在自定義模板介面看到剛剛配置的模板列表，接下來，你可以基於該模板初始化建立專案。
3. 啟動服務
建立專案完成後， Iceworks 會提示是否需要按需依賴，點選安裝依賴完成後，我們可以啟動除錯服務，在瀏覽器訪問 http://localhost:4444/ 可以看到如下介面，說明我們的自定義模板完成。
4. 目錄規範
在建立完專案後，大編輯器開啟生成的專案目錄如下：
.
├── public // 靜態資源
│ ├── favicon.png
│ └── index.html
├── src
│ ├── api // 介面定義
│ ├── components // 公共元件
│ │ ├── Authorized
│ │ └── Exception
│ ├── layouts // 佈局元件
│ │ ├── BasicLayout
│ │ └── UserLayout
│ ├── pages // 頁面
│ │ ├── Dashboard
│ │ └── NotFound
│ ├── store // 全域性 store
│ │ ├── userLogout
│ │ └── userProfile
│ └── utils // 工具函式
│ │ ├── checkStore.js
│ │ ├── injectReducer.js
│ │ ├── reducerInjectors.js
│ │ └── utils.js
│ ├── configureStore.js // redux 入口配置
│ ├── reducers.js // reducers 入口配置
│ ├── index.js // 應用入口
│ ├── menuConfig.js // 導航配置
│ ├── routerConfig.js // 路由配置
│ └── router.jsx // 路由入口
├── tests // 測試
├── .gitignore // git 忽略目錄配置
├── .editorconfig // 程式碼風格配置
├── .eslintignore // eslint 忽略目錄配置
├── .eslintrc // eslint 配置
├── package.json // package.json
└── README.md // 專案說明
複製程式碼5. 建立頁面
到目前為止，完成了基本的自定義模板流程，在瀏覽器預覽可以看到只有註冊登入介面和簡單的 Dashboard 頁面，接下來，我們可以使用 Iceworks 通過區塊組合的方式來建立頁面，減少重複的 UI 開發工作。這裡隨機選擇兩個區塊，可以點選預覽頁面或者直接生成頁面，如下截圖：
點選生成頁面後，在回到瀏覽器找到剛剛設定的頁面選單，點選可以看到正是我們建立的頁面：
6. 業務開發
至此，基本的流程已經完成，接下來，你就可以聚焦於實際的業務開發，如接入資料等等，在開發完成後，你可以在 Iceworks 中一鍵構建，上傳到阿里雲 oss 等操作。更多操作請前往飛冰官網
擴充套件資訊
- 官方網站：飛冰-讓前端開發簡單而友好
- 下載 Iceworks：alibaba.github.io/ice/icework…
- Github：github.com/alibaba/ice
- 飛冰群二維碼：點選這裡檢視二維碼
- 聯絡 & 招聘 ice-admin[at]alibaba-inc.com