注意扩展项目不支持Hotfix

自定义组件开发

标签（空格分隔）： beisen

基于BeisenCloud开发的业务,扩展自定义组件请使用这个项目作为项目初始化文件

该空项目使用

• 修改package.json文件内项目名称和作者名
• 如果需要依赖BeisenCloudUI，talent-core以及ethos，修改对应的版本号

备注

    webpack命令
    npm run dev    接入线上开发动态生成app.min.js(为nginx解析使用)
    npm run build  编译最终文件

目录结构

• components

自定义组件扩展目录,所有的自定义组件统一放到此目录下面

• summary 组件索引目录,用于项目最终编译使用,webpack会根据索引将组件进行打包

• data业务数据挂载 format规则请写在 formatStore.js中

• util 工具函数

• validators 自定义的验证器

mock数据存放

数据源部分

数据 > 组件

首先准备formater 这个要用来干什么呢

北森Cloud 在渲染整个页面的时候都是根据一棵符合规范的数据树,所以cloud是不了解业务数据的,在渲染整个前端页面的之前就需要业务方把自己的数据转换成符合平台规范的数据并且挂载到数据源上,所以就用到了格式化规则

流程:
获取数据 > 格式化 > 挂载到数据源 > 渲染业务组件

开发业务需要一个formater 给平台调用;为了方便理解data里面有一个demo 用了最直接的方式去操作数据。

一个app只有一个顶层挂载点 具体的细分需要根据业务场景具体划分。

开发环境

利用nginx 然后把组件根据summary文件夹的索引  实时动态的编译到dist文件夹这样就能直接读取线上数据进行开发调试。对应 npm run dev

注意事项

components中组件规范：

• 不可使用connect将components组件与redux的state和dispatch关联，应由父组件将数据和actionCreator通过props传入
• 本环境只是帮助模拟整个开发环境 组件内不允许有connect 关联

todo list

• [x] 自动打包
• [x] 实时调试
• [x] 加载优化
• [x] 承载页
• [x] css/图片/打包分离
• [x] 上线支持
• [x] 文档
• [x] 组件数据源

详细规范及学习资料请访问：http://book.beisen.co/ui/TalentUI/_book/index.html