1.项目功能

项目主要分为四个模块，下面一一介绍。

顶部导航区域主要的功能分布是左边是项目logo展示以及项目名称，中间的菜单栏主要有组件拖拽的撤销功能，重做，清空整个页面，还有发布等功能，最右边是一个执行预览的图标按钮，点击后可以预览页面。

有两个功能还未完善，一个是撤销功能，一个是发布功能，技术上达到了瓶颈，暂时还没研究出来。 2. 页面展示区域这部分包含一个空白画布，可以设置其背景色，背景图片，以及对页面的元素添加一些动效和事件等操作

所有的页面展示在旁边的纵向导航条里边。

主要包含页面管理，一些常用的组件列表，还有两个容器组件，都是封装好的一些独立的模块，可以通过鼠标拖拽来复刻组件内容

4.右侧的属性编辑区域

这块区域的功能相对来说是比较多的，一些ui动效也借助于一些第三方库来实现，避免手写消耗大量的时间，并且效果可能也达不到预期。

主要实现的就是对拖拽到容器内的组件进行功能的添加，事件的绑定等编辑操作。

2.项目技术栈

项目整体采用vue3开发框架，并且使用新一代的构建工具vite进行打包，开发的语言为ts，编译引擎也为typescript引擎。项目的启动采用命令npm run dev,项目的配置文档里边设置了启动后自动打开浏览器配置项，若要修改，可以先在package.json文件中修改相关配置。

在线预览地址：xinanzhijia.xyz/ 启动时可能有点慢，耐心等待哦～

这次青训营中学习到了很多模块化的知识，这些知识提供了前端学习路线的一个大致的方向，但每个模块如果要精通那就又是一个岗位，所以掌握好基本的知识十分必要，这样才能走的更远。今后的重点方向还是得在算法和js的深度学习上边，希望能在这方面能有所突破。