资讯专栏INFORMATION COLUMN

Iceworks 2.8.0 发布,自定义你的 React 模板

FrozenMap / 2263人阅读

摘要:那有没有一种解决方案,是可以完全从零开始去自定义一个模板,能按需进行配置生成,答案是有的。在之前的版本,已经支持自定义模板功能,但仅限于对进行自定义,包含基础导航侧边栏页脚等配置,但这显然是不够的。

自定义模板顾名思义即是定制自己的模板,相对社区已有的各类 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

相关文章

  • Iceworks 2.8.0 发布定义你的 React 模板

    摘要:那有没有一种解决方案,是可以完全从零开始去自定义一个模板,能按需进行配置生成,答案是有的。在之前的版本,已经支持自定义模板功能,但仅限于对进行自定义,包含基础导航侧边栏页脚等配置,但这显然是不够的。 自定义模板顾名思义即是定制自己的模板,相对社区已有的各类 React 模板,大多数是全家桶的形式,内置了很多功能和页面集合,所谓开箱即用;但在实际使用过程中,我们会发现,下载模板进行相应的...

    instein 评论0 收藏0
  • Iceworks 2.7.0 发布,海量图表供你选择

    摘要:发布,海量图表供你选择,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求轻松操作页面管理,海量物料自由搭配,页面组合可视化操作更得心应手开发调试一体化,集成运行环境零配置运行,开箱即用。 Iceworks 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页...

    gitmilk 评论0 收藏0
  • Iceworks 2.7.0 发布,海量图表供你选择

    摘要:发布,海量图表供你选择,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求轻松操作页面管理,海量物料自由搭配,页面组合可视化操作更得心应手开发调试一体化,集成运行环境零配置运行,开箱即用。 Iceworks 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页...

    ymyang 评论0 收藏0
  • 飞冰 2.0 正式发布并支持 Vue 项目开发

    摘要:距离正式版发布又过了两个月,飞冰迎来了大版本的更新。飞冰是什么详细的飞冰背景和介绍等,请参照正式版发布的介绍,这里不再赘述。飞冰带来了什么支持项目开发千呼万唤始出来。其次,已经进行全面升级,支持自定义物料源项目识别等功能和相关逻辑处理。 距离 1.0 正式版发布又过了两个月,飞冰迎来了 2.0 大版本的更新。 飞冰 2.0 是什么? 详细的飞冰背景和介绍等,请参照 1.0 正式版发布的...

    邱勇 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<