本编辑器（土豆猫图形编辑器）社区版代码已开源，开源库地址：https://gitee.com/longhan13/lgxmap_community.git
从此章节开始，后续开始讲代码框架、关键模块代码、数学工具（向量、矩阵），感兴趣的朋友最好把代码下载下来，对着代码来阅读文章更有助于理解。
本文开始讲解前端代码框架。no code no 逼逼，所以先看代码截图：
1、canvas，画布内核，本编辑器最核心的部分，所有的图形编辑、显示逻辑都在里面实现。
2、manage,数据存取管理模块，数据存取如本地文件解析、网络数据加载解析、菜单事件、按钮事件响应都在此处理
3、components，vue组件文件夹，各种vue子组件都在里面，如‘工具箱’可收缩抽屉、‘我的文件’抽屉、‘模具定义’对话框、‘图形属性’编辑页面等
4、router,路由管理,实现主页到子编辑模块的路由。社区版里只实现了到viso编辑模块的路由。二次开发者可以按需增加
5、store,全局数据管理，包括：当前登录用户信息、当前正在打开的图形信息、全局模具数据、以及各种懒加载又必须全局使用的数据
6、views，路由页面文件夹，第4条中设置的路由页面必须放到此文件夹下，放到其他目录无法正常路由。本人为vue初学者，所以不知道什么原因。
7、lgxcanvas，对H5 canvas画布进行封装，响应各种鼠标事件并传给第1条中canvas画布内核实现完整的业务逻辑，如鼠标按下开始绘制线路第一个坐标点，鼠标移动线路当前点坐标跟着变化，然后刷新canvas进行显示。它由对应canvas所在的页面在onmouted中进行构造初始化，构造代码如下：
let ptr = new LGXCanvas('MainPaintCanvas', window.canvasManager, store.state.symbolDefData);第一个参数为canvas画布ID，第二、三个参数为网页一运行就调用的main.js后构造的CanvasManager数据管理对象以及从后端服务中加载的模具数据。为提高加载性能，网页初始启动只加载基本模具。
标签：canvas,网页,代码,零手,画布,编辑器,路由,加载 From： https://blog.csdn.net/longx13/article/details/139546774