摘要：那有没有一种解决方案，是可以完全从零开始去自定义一个模板，能按需进行配置生成，答案是有的。在之前的版本，已经支持自定义模板功能，但仅限于对进行自定义，包含基础导航侧边栏页脚等配置，但这显然是不够的。
自定义模板顾名思义即是定制自己的模板，相对社区已有的各类 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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54620.html
摘要：那有没有一种解决方案，是可以完全从零开始去自定义一个模板，能按需进行配置生成，答案是有的。在之前的版本，已经支持自定义模板功能，但仅限于对进行自定义，包含基础导航侧边栏页脚等配置，但这显然是不够的。 自定义模板顾名思义即是定制自己的模板，相对社区已有的各类 React 模板，大多数是全家桶的形式，内置了很多功能和页面集合，所谓开箱即用；但在实际使用过程中，我们会发现，下载模板进行相应的...
摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...
摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...
摘要：距离正式版发布又过了两个月，飞冰迎来了大版本的更新。飞冰是什么详细的飞冰背景和介绍等，请参照正式版发布的介绍，这里不再赘述。飞冰带来了什么支持项目开发千呼万唤始出来。其次，已经进行全面升级，支持自定义物料源项目识别等功能和相关逻辑处理。 距离 1.0 正式版发布又过了两个月，飞冰迎来了 2.0 大版本的更新。 飞冰 2.0 是什么? 详细的飞冰背景和介绍等，请参照 1.0 正式版发布的...
阅读 1320·2021-09-28 09:43
阅读 3939·2021-09-04 16:41
阅读 1881·2019-08-30 15:44
阅读 3683·2019-08-30 15:43
阅读 745·2019-08-30 14:21
阅读 2008·2019-08-30 11:00
阅读 3278·2019-08-29 16:20
阅读 1874·2019-08-29 14:21
