Iceworks 2.8.0 釋出，自定義你的 React 模板

sizhong發表於2018-09-10

自定義模板顧名思義即是定製自己的模板，相對社群已有的各類 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 開發工作。這裡隨機選擇兩個區塊，可以點選預覽頁面或者直接生成頁面，如下截圖：