摘要:那有没有一种解决方案,是可以完全从零开始去自定义一个模板,能按需进行配置生成,答案是有的。在之前的版本,已经支持自定义模板功能,但仅限于对进行自定义,包含基础导航侧边栏页脚等配置,但这显然是不够的。
自定义模板顾名思义即是定制自己的模板,相对社区已有的各类 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 正式版发布的...
阅读 1331·2021-09-28 09:43
阅读 4033·2021-09-04 16:41
阅读 1895·2019-08-30 15:44
阅读 3700·2019-08-30 15:43
阅读 757·2019-08-30 14:21
阅读 2016·2019-08-30 11:00
阅读 3293·2019-08-29 16:20
阅读 1890·2019-08-29 14:21