自定义模板顾名思义即是定制自己的模板，相对社区已有的各类 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 会提示是否需要按需依赖，点击安装依赖完成后，我们可以启动调试服务，在浏览器访问 可以看到如下界面，说明我们的自定义模板完成。
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：
- Github：
- 飞冰群二维码：
- 联系 & 招聘 ice-admin[at]