这是我参与「第四届青训营 」笔记创作活动的第32天

项目

青训营就要结束了，这里对我们的项目进行一个简单的记录，也记录下这一个多月的项目收获。

1 项目介绍

• 项目名称：LowCodeByteDance
  • LowCode是主要的实现目标为一个低代码开发平台，通过简单的可视化地拖拽组件快速开发一个移动端界面。ByteDance表达的是我们的队名“来字节就队”。^_^
• 项目logo：

• 项目实现：本项目基于vue3框架和ts语言开发，采用新型构建工具vite打包，typescript引擎编译。
  • 开发端项目依赖配置命令：pnpm i，安装项目所需的全部依赖；项目启动命令：npm run dev，自动打开本地浏览器启动项目 http://127.0.0.1:3000/
• 项目部署：队内成员将本项目部署到了一个2核4G服务器上，访问地址为：xinanzhijia.xyz/

2 项目功能

• 顶部导航栏：
  • 撤销和发布功能暂时未实现
  • 重做：删除当前页面
  • 清空列表：删除当前页面中的所有组件
  • 运行按钮：使用iframe在页面中嵌入preview页面,达到预览效果
• 页面设计区：相当于“画布”
  • 根据页面设计目标，在中间空白内容区中通过拖拽组件，设置属性完成页面布局和功能设计。
  • 画布大小为移动端设定
• 左侧组件选择
  • 页面管理：
    • 增加或者删除页面
    • 定义页面的名称和路径，其中设置路径可以用于设置页面间的跳转
  • 常用组件：
    • 各类常用组件,比如：按钮，文字，图片，复选框，移动端底部导航栏、顶部导航栏等等；
  • 容器组件：
    • 布局容器：
      • 设置水平方向布局，根据比例可设置1-4列
• 右侧属性编辑
  • 属性：
    • 不同组件的具体属性设置，包括组件显示内容，形状大小等等设置
  • 动画：
    • 为不同组件添加动画效果，比如：弹出，旋转，进入等操作
  • 页面管理：
    • 设置页面背景颜色，图片等

3 项目收获

从找人组队到确定选题，分配任务到彼此配合完成项目的过程中，我们的队长和队员们都很积极，大家互相学习互相合作，齐心协力完成任务的感觉，真的很美好。希望我们以后都能继续保持热情，坚持学习，有一个美好灿烂的未来。