自定义模板，顾名思义，就是自定义你自己的模板。与社区中的各种React模板相比，它们大多是全家桶的形式，内置了很多功能和页面集合，所谓开箱即用；但在实际使用过程中，我们会发现，下载模板进行相应的初始化后，在开始业务之前，首先要做的是删除，删除，删除，删除不需要的，在删除多余的页面和相应的配置之前，需要了解整个模板的设计思路，否则很可能或多或少的删减会导致项目无法启动等，这类模板的优缺点这里就不多说了。有没有一种方案可以完全从头定制一个模板，按需配置生成？答案是肯定的。Vue社区在这方面做得非常好。在vue-cli3.0版本之前，提供了vuejs-templates，包括6套基础模板。在vue-cli3.0中，做了进一步的优化和改进，包括默认的Preset配置和用户自定义配置。用户自定义配置后，会询问是否将当前配置函数保存为以后项目配置的预设值，以便下次直接使用，无需重新配置，实现一键生成，一键调试一键发布是快捷操作，可以让开发者更专注于业务层面。Iceworks2.8.0之前的版本已经支持自定义模板功能，但仅限于自定义Layout，包括基础、导航、侧边栏、页脚等配置，但这显然是不够的。Iceworks2.8.0版本增加了高级配置选项，支持按需选择Redux相关的配置功能，比如是否注册登录模块，是否需要权限模块等，可以自由组合和选择按需生成。自定义创建流程在模板界面选择一个自定义模板，点击新建，弹窗如下，左边是属性配置面板，右边是配置的实时渲染。目前定制主要包括以下四部分：配置基础配置布局配置高级配置基础配置基础配置主要包括布局容器配置、主题配置、自定义皮肤三部分。其中：布局容器配置有全屏和固定宽度两种选择。全屏表示100%宽度布局，默认固定宽度为1200px。两个选项，对应Layout部分的主题配置。自定义皮肤主要是指配置基础组件的样式。您可以选择主色和辅助色。具体可以参考【修改主题配色】(https://alibaba.github.io/ice...布局配置布局配置主要包括顶部导航、侧边导航、页脚三部分。对应的导航属性可以只在启动的前提下配置，在某些情况下可能不需要导航，只要不勾选，默认不会生成导航部分，不同形式的布局可以通过属性配置组合到满足业务场景高级配置高级配置目前主要支持Redux相关的配置，可以根据需要添加，如果开启Redux配置，项目中会生成Redux相关的脚手架代码，选项包括三个部分：完成注册以及登录示例、权限管理示例和Mock示例步骤一、属性配置在属性配置面板中，可以根据需要进行配置，这里进行演示我们使用默认配置，同时勾选所有redux配置高级配置，使生成的项目是一个功能齐全的Redux项目。2.创建一个项目，配置面板配置完成后点击保存，就可以自定义模板了，界面上可以看到刚才配置的模板列表。接下来，您可以根据模板初始化并创建项目。3、启动服务创建项目后，Iceworks会提示是否需要按需依赖。点击InstallDependency后，我们就可以启动调试服务了，在浏览器中访问http://localhost:4444/，可以看到如下界面，说明我们的自定义模板已经完成。4.目录说明项目创建后，大编辑器打开生成的项目目录如下：.├──public//静态资源│├──favicon.png│└──index.html├──src├├──api//接口定义│├──components//公共组件││├──Authorized││└──Exception│├──layouts//布局组件││├──BasicLayout││└──UserLayout│├──pages//页面││├──Dashboard││└──NotFound│├──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//tests├──.gitignore//git忽略目录配置├──.editorconfig//代码风格配置├──.eslintignore//eslint忽略目录配置├──.eslintrc//eslint配置├──package.json//package.json└──README.md//项目描述5.创建页面至此，基本的自定义模板流程已经完成。在浏览器预览中，只能看到注册登录界面和一个简单的Dashboard页面。接下来，我们可以使用Iceworks通过组合块来创建页面，以减少重复。UI开发工作这里随机选择两个block，可以点击预览页面或者直接生成页面，如下截图所示：点击生成页面后，回到浏览器找到刚才设置的页面菜单，点击看看我们创建的页面：6.业务开发至此，基本流程已经完成。接下来就可以专注于实际的业务开发，比如访问数据等，开发完成后可以在Iceworks中一键搭建，上传到阿里云oss等操作。更多操作请到飞冰官网获取扩展资料官网：飞冰-让前端开发变得简单友好下载Iceworks：https://alibaba.github.io/ice...Github：http://github.com/alibaba/ice飞天集团二维码：点此查看二维码联系&招聘ice-admin[at]alibaba-inc.com
