資訊專欄INFORMATION COLUMN
摘要：那有沒有一種解決方案，是可以完全從零開始去自定義一個模板，能按需進行配置生成，答案是有的。在之前的版本，已經支持自定義模板功能，但僅限于對進行自定義，包含基礎導航側邊欄頁腳等配置，但這顯然是不夠的。
自定義模板顧名思義即是定制自己的模板，相對社區已有的各類 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 部分的主題配置
定制皮膚主要是指配置基礎組件的樣式，可以選擇主色和輔色，詳細可以查看[修改主題配色
](https://alibaba.github.io/ice...
布局配置布局配置主要包含 頂部導航、側邊導航、頁腳 三部分，只有在啟動的前提下才能配置對應的導航屬性。在某些情況下，可能不需要導航，只要不勾選啟用，則默認不會生成導航部分。可以通過屬性配置組合出不同形式的布局，以滿足業務場景。
高級配置高級配置目前主要支持 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：https://alibaba.github.io/ice...
Github：http://github.com/alibaba/ice
飛冰群二維碼：點擊這里查看二維碼
聯系 & 招聘 ice-admin[at]alibaba-inc.com
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54620.html
摘要：那有沒有一種解決方案，是可以完全從零開始去自定義一個模板，能按需進行配置生成，答案是有的。在之前的版本，已經支持自定義模板功能，但僅限于對進行自定義，包含基礎導航側邊欄頁腳等配置，但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板，相對社區已有的各類 React 模板，大多數是全家桶的形式，內置了很多功能和頁面集合，所謂開箱即用；但在實際使用過程中，我們會發現，下載模板進行相應的...
摘要：發布，海量圖表供你選擇，豐富模板一鍵創建，提供多種垂直領域模板，快速創建項目，支持風格切換，滿足個性化需求輕松操作頁面管理，海量物料自由搭配，頁面組合可視化操作更得心應手開發調試一體化，集成運行環境零配置運行，開箱即用。 Iceworks 2.7.0 發布，海量圖表供你選擇 Iceworks，豐富模板一鍵創建，提供多種垂直領域模板，快速創建項目，支持風格切換，滿足個性化需求；輕松操作頁...
摘要：發布，海量圖表供你選擇，豐富模板一鍵創建，提供多種垂直領域模板，快速創建項目，支持風格切換，滿足個性化需求輕松操作頁面管理，海量物料自由搭配，頁面組合可視化操作更得心應手開發調試一體化，集成運行環境零配置運行，開箱即用。 Iceworks 2.7.0 發布，海量圖表供你選擇 Iceworks，豐富模板一鍵創建，提供多種垂直領域模板，快速創建項目，支持風格切換，滿足個性化需求；輕松操作頁...
摘要：距離正式版發布又過了兩個月，飛冰迎來了大版本的更新。飛冰是什么詳細的飛冰背景和介紹等，請參照正式版發布的介紹，這里不再贅述。飛冰帶來了什么支持項目開發千呼萬喚始出來。其次，已經進行全面升級，支持自定義物料源項目識別等功能和相關邏輯處理。 距離 1.0 正式版發布又過了兩個月，飛冰迎來了 2.0 大版本的更新。 飛冰 2.0 是什么? 詳細的飛冰背景和介紹等，請參照 1.0 正式版發布的...
閱讀 1355·2021-09-28 09:43
閱讀 4146·2021-09-04 16:41
閱讀 1923·2019-08-30 15:44
閱讀 3734·2019-08-30 15:43
閱讀 782·2019-08-30 14:21
閱讀 2041·2019-08-30 11:00
閱讀 3325·2019-08-29 16:20
閱讀 1928·2019-08-29 14:21
