前端可视化开发（四）- 实现图元阶段一

实现一个图元流程

背景

考虑到我们采用的技术是vue，我们将来的目标是可迁移，什么意思呢？
我们为了迁移（升级为vue3.0或改为react）时做更少的事情，规划出了一个数据池，数据池不随框架的变化而改变。
我们画个图看下分层结构
这里我们分为三个层级：

1. 前端
2. 状态管理
3. 数据池

前端层

这个前端层主要是构建前端页面。
git在线地址加载比较慢 https://chuxiaoguo.github.io/mita/#/
这里指的是菜单，工具栏，画布，配置栏，滚动条，快捷键，粘贴板等...

状态层

这里的状态其实就是vuex。
这一层的功能有以下几点：

• 记录突变，为了后面历史的功能（撤销和重做）
• 数据状态改变能够被追踪，便于调试
• 相当于中间层的概念、

数据层

1. 数据层定义了元素，页面，组件，母版等抽象类和工厂类
2. 数据层有管理类，建造类，组合类
3. 有数据唯一的入口
4. 丰富的配置项

现在讲太多会太复杂，大概就是一个数据操作的仓库

定义第一个元素

待续...
上一篇 前端可视化开发（三）- 基础元素