低代码平台-基础布局设计

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

主题

搭建一个低代码平台。响应式布局。通过拖拽的形式，构建出表单、表格和图形。支持组件之间的联动和异步数据的获取。

目标

1. 初始化项目
2. 项目框架布局

技术栈

1. vue-grid-layout
2. vue+elementUI

项目框架布局

项目框架整体分为：上，左中右。

1. 上：顶部展示平台的描述信息，以及对应的版本号。
2. 左：card展示。内容显示基础配置的组件。例如：布局组件、按钮组件。等等
3. 中：主要的展示区域。
4. 右：配置区域，负责各个组件的配置和各个组件之间联动的配置。

初始化项目

vue初始化项目。

项目配置

1. 引入ElementUI

   // 一、npm安装
      npm i element-ui -S
   // 二、在 main.js 中写入以下内容：
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(ElementUI);
   
   

2. 引入reset.css

    npm install reset.css --save
   

3. flex左中右布局

   左右宽度固定，中间宽度自适应。高度自适应。

布局目录结构设计

views下新建baseIndex，baseHeader，baseLeft，baseCenter和baseRight。

1. baseIndex: 包含顶部和左中右布局。
2. baseHeader: 顶部布局。顶部展示平台的描述信息，以及对应的版本号。
3. baseLeft: card展示。内容显示基础配置的组件。例如：布局组件、按钮组件。等等
4. baseCenter: 主要的展示区域。
5. baseRight: 配置区域，负责各个组件的配置和各个组件之间联动的配置。

总结

这一章，主要是初始化项目和项目的基础布局工作。基础布局中，需要学习到，左右宽度固定，中间自适应。下一章，需要做的是，平台中的布局组件。