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

chenbin
2,226 阅读5分钟

自定义模板顾名思义即是定制自己的模板，相对社区已有的各类 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 会提示是否需要按需依赖，点击安装依赖完成后，我们可以启动调试服务，在浏览器访问 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 等操作。更多操作请前往飞冰官网

扩展信息

avatar
文章
阅读
粉丝

友情链接：