摘要：那有沒(méi)有一種解決方案，是可以完全從零開(kāi)始去自定義一個(gè)模板，能按需進(jìn)行配置生成，答案是有的。在之前的版本，已經(jīng)支持自定義模板功能，但僅限于對(duì)進(jìn)行自定義，包含基礎(chǔ)導(dǎo)航側(cè)邊欄頁(yè)腳等配置，但這顯然是不夠的。

自定義模板顧名思義即是定制自己的模板，相對(duì)社區(qū)已有的各類 React 模板，大多數(shù)是全家桶的形式，內(nèi)置了很多功能和頁(yè)面集合，所謂開(kāi)箱即用；但在實(shí)際使用過(guò)程中，我們會(huì)發(fā)現(xiàn)，下載模板進(jìn)行相應(yīng)的初始化之后，在開(kāi)始業(yè)務(wù)前，要做的第一件事情就是刪、刪、刪，刪掉不需要的多余頁(yè)面和相應(yīng)的配置、在刪之前你還需要去了解整個(gè)模板的設(shè)計(jì)思路，不然很可能多刪或者少刪導(dǎo)致項(xiàng)目啟動(dòng)失敗等等，這里暫且不討論這類模板的優(yōu)缺點(diǎn)。

那有沒(méi)有一種解決方案，是可以完全從零開(kāi)始去自定義一個(gè)模板，能按需進(jìn)行配置生成，答案是有的。Vue 社區(qū)在這方面就做的非常好，在 vue-cli 3.0 版本之前，提供了 vuejs-templates，包含了 6 套基礎(chǔ)的模板，在 vue-cli 3.0 中又做了進(jìn)一步的優(yōu)化和改進(jìn)，包括默認(rèn)預(yù)設(shè)配置和用戶自定義配置，在用戶自定義配置之后，會(huì)詢問(wèn)是否保存當(dāng)前的配置功能為將來(lái)的項(xiàng)目配置的預(yù)設(shè)值，這樣下次可直接使用不需要再次配置，實(shí)現(xiàn)一鍵生成、一鍵調(diào)試、一鍵發(fā)布這些快捷的行為，方便開(kāi)發(fā)者將注意力更聚焦于業(yè)務(wù)層面。

在 Iceworks 2.8.0 之前的版本，已經(jīng)支持自定義模板功能，但僅限于對(duì) Layout 進(jìn)行自定義，包含基礎(chǔ)、導(dǎo)航、側(cè)邊欄、頁(yè)腳等配置，但這顯然是不夠的。在 Iceworks 2.8.0 版本中，增加了高級(jí)配置選項(xiàng)，支持按需選擇 Redux 的相關(guān)配置功能，如是否需要注冊(cè)登錄模塊，是否需要權(quán)限模塊等等，可自由組合，按需生成。

在 模板 界面選擇 自定義模板，點(diǎn)擊新建彈窗如下，左邊是屬性配置面板，右邊是配置的實(shí)時(shí)效果圖，目前自定義主要包含以下四部分配置

基礎(chǔ)配置

布局配置

高級(jí)配置

基礎(chǔ)配置主要包含布局容器配置、主題配置、定制皮膚三部分，其中：

布局容器配置有全屏和固寬兩個(gè)選項(xiàng)，全屏即 100% 寬度的布局，固寬默認(rèn)是 1200px

主題配置有深色和淺色兩個(gè)選項(xiàng)，對(duì)應(yīng)的是 Layout 部分的主題配置

定制皮膚主要是指配置基礎(chǔ)組件的樣式，可以選擇主色和輔色，詳細(xì)可以查看[修改主題配色

](https://alibaba.github.io/ice...

布局配置主要包含 頂部導(dǎo)航、側(cè)邊導(dǎo)航、頁(yè)腳 三部分，只有在啟動(dòng)的前提下才能配置對(duì)應(yīng)的導(dǎo)航屬性。在某些情況下，可能不需要導(dǎo)航，只要不勾選啟用，則默認(rèn)不會(huì)生成導(dǎo)航部分?？梢酝ㄟ^(guò)屬性配置組合出不同形式的布局，以滿足業(yè)務(wù)場(chǎng)景。

高級(jí)配置目前主要支持 Redux 的相關(guān)配置，可以根據(jù)需要按需添加，如果啟用 Redux 配置，則會(huì)在項(xiàng)目中生成 Redux 相關(guān)的腳手架代碼，同時(shí)可選項(xiàng)包括完整的 注冊(cè)登錄示例、權(quán)限管理示例 和 Mock 示例 三部分。

1. 屬性配置

在屬性配置面板，可以按需進(jìn)行配置，這里演示我們使用默認(rèn)的配置，同時(shí)在高級(jí)配置里勾選所有的 redux 配置，這樣生成的項(xiàng)目即是包含完整功能的 Redux 項(xiàng)目。

2. 創(chuàng)建項(xiàng)目

在配置面板配置完成后點(diǎn)擊保存，即可在自定義模板界面看到剛剛配置的模板列表，接下來(lái)，你可以基于該模板初始化創(chuàng)建項(xiàng)目。

3. 啟動(dòng)服務(wù)

創(chuàng)建項(xiàng)目完成后， Iceworks 會(huì)提示是否需要按需依賴，點(diǎn)擊安裝依賴完成后，我們可以啟動(dòng)調(diào)試服務(wù)，在瀏覽器訪問(wèn) http://localhost:4444/ 可以看到如下界面，說(shuō)明我們的自定義模板完成。

4. 目錄規(guī)范

在創(chuàng)建完項(xiàng)目后，大編輯器打開(kāi)生成的項(xiàng)目目錄如下：

.
├── public                     // 靜態(tài)資源
│   ├── favicon.png
│   └── index.html
├── src
│   ├── api                    // 接口定義
│   ├── components             // 公共組件
│   │    ├── Authorized
│   │    └── Exception
│   ├── layouts                // 布局組件
│   │    ├── BasicLayout
│   │    └── UserLayout
│   ├── pages                  // 頁(yè)面
│   │    ├── Dashboard
│   │    └── NotFound
│   ├── store                  // 全局 store
│   │    ├── userLogout
│   │    └── userProfile
│   └── utils                 // 工具函數(shù)
│   │    ├── checkStore.js
│   │    ├── injectReducer.js
│   │    ├── reducerInjectors.js
│   │    └── utils.js
│   ├── configureStore.js    // redux 入口配置
│   ├── reducers.js          // reducers 入口配置
│   ├── index.js             // 應(yīng)用入口
│   ├── menuConfig.js        // 導(dǎo)航配置
│   ├── routerConfig.js      // 路由配置
│   └── router.jsx           // 路由入口
├── tests                    // 測(cè)試
├── .gitignore               // git 忽略目錄配置
├── .editorconfig            // 代碼風(fēng)格配置
├── .eslintignore            // eslint 忽略目錄配置
├── .eslintrc                // eslint 配置
├── package.json             // package.json
└── README.md                // 項(xiàng)目說(shuō)明

5. 創(chuàng)建頁(yè)面

到目前為止，完成了基本的自定義模板流程，在瀏覽器預(yù)覽可以看到只有注冊(cè)登錄界面和簡(jiǎn)單的 Dashboard 頁(yè)面，接下來(lái)，我們可以使用 Iceworks 通過(guò)區(qū)塊組合的方式來(lái)創(chuàng)建頁(yè)面，減少重復(fù)的 UI 開(kāi)發(fā)工作。這里隨機(jī)選擇兩個(gè)區(qū)塊，可以點(diǎn)擊預(yù)覽頁(yè)面或者直接生成頁(yè)面，如下截圖：

點(diǎn)擊生成頁(yè)面后，在回到瀏覽器找到剛剛設(shè)置的頁(yè)面菜單，點(diǎn)擊可以看到正是我們創(chuàng)建的頁(yè)面：

6. 業(yè)務(wù)開(kāi)發(fā)

至此，基本的流程已經(jīng)完成，接下來(lái)，你就可以聚焦于實(shí)際的業(yè)務(wù)開(kāi)發(fā)，如接入數(shù)據(jù)等等，在開(kāi)發(fā)完成后，你可以在 Iceworks 中一鍵構(gòu)建，上傳到阿里云 oss 等操作。更多操作請(qǐng)前往飛冰官網(wǎng)

擴(kuò)展信息

官方網(wǎng)站：飛冰-讓前端開(kāi)發(fā)簡(jiǎn)單而友好

下載 Iceworks：https://alibaba.github.io/ice...

Github：http://github.com/alibaba/ice

飛冰群二維碼：點(diǎn)擊這里查看二維碼

聯(lián)系 & 招聘 ice-admin[at]alibaba-inc.com