• 需求背景

B端需求 https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf/selz6t

编辑器需求 https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf/wsaqd4

业务组件需求 https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf/whhax9

管理后台需求 https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf/mf2k5u

• UI设计图

  https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf/mbxh1z

• 模块设计

• 核心数据结构

  vuex store

  ​ ps:每个组件尽量符合vnode规范

{
    // 当前作品-也就是主要展示的H5
    work: {
        title: '作品标题',
        setting: { /* 一些可能的配置项，用不到就先预留 */ },
        props: { /* 页面 body 的一些设置，如背景色 */ },
        components: [
            // components 要用数组，有序结构

            // 单个 node 要符合常见的 vnode 格式
            {
                id: 'xxx', // 每个组件都有 id ，不重复
                name: '文本1',
                tag: 'text',
                attrs: { fontSize: '20px' },
                children: [
                    '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定
                ]
            },
            {
                id: 'yyy',
                name: '图片1',
                tag: 'image',
                attrs: { src: 'xxx.png', width: '100px' },
                children: null
            },
        ]
    },

    // 画布当前选中的组件
    activeComponentId: 'xxx'
}

Vuex getter

{
    layers() => {
        sotre.work.components.map( c => {
            return {
                id:c.id,
                name:c.name
            }
        })
    }
}

• 扩展性保证

  • 组件扩展
  • 编辑器的图层，复制，添加自定义图片等功能扩展
  • 扩展页面信息，比如多语言
  • 扩展其他功能，比如图形图表等大数组展示

• 提升开发效率，测试效率

  • 前端脚手架的搭建，比如webpack
  • 测试框架的使用，比如jest
  • 公共组件平台的搭建
  • 以往ui设计的统一规范或者选定成熟的ui框架，避免重复造轮子

• 运维保障

  • 线上服务和运维服务
  • 安全
  • 监控和报警
  • 服务扩展性：基于云服务，可以随时扩展机器和配置

（备注：虽然写完了技术文档，但是基本还是跟着老师的思路走，运维保障部分也基本空白，提醒自己学完课程要回来重写技术文档）