从零搭建低代码平台（一）项目初始化

萌晓二 · 发布于 2023-7-12 14:04:57

目录
为什么要搭建低代码平台？
低代码平台的组成和预期结果
项目初始化搭建
创建data.json文件
创建搭建主界面的大致款式
创建一个editor.jsx用来渲染主页面
在 App.vue 中引入 data.json
在 App.vue 中引入 Editor组件
editor.jsx接收传过来的参数
我们项目实训的题目是 “开发组件库并实现低代码平台的搭建”，我们小组主要有三个人组成，我负责的部分主要是代码平台的搭建模块。
为什么要搭建低代码平台？

低代码开发平台（LCDP）：开发者不需要传统的手写的代码的方式来停止编程，可以采用图形化拖拽的方式，配置参数来完成开发工作，低代码的核心：降低反复劳动。
低代码平台的组成和预期结果

组成部分：组件区、编辑区、预览区、属性区/事件区。通过拖拽组件来生成JSON，通过JSON来渲染出页面（JSONSchema）。
预期结果：

项目初始化搭建

在控制台输入：

vue create low_code

复制代码

创建data.json文件

首先创建一个 data.json 文件，用来存储我们生成或者导入的JSON语句。

{
"container": {
"width": 900,
"height": 570
},
"blocks": [
],
"style": [
]
}

复制代码

其中，container主要用来描绘预览区的宽度和高度，blocks主要用来描绘如渲染组件的外部属性（x坐标、y坐标等），style主要是用来描绘组件的内部属性（组件的宽、高等等）。
创建搭建主界面的大致款式

创建一个editor.jsx用来渲染主页面

import {defineComponent} from "vue";
export default defineComponent({
setup(){
return ()=> <div>Hello LowCode!</div>
}
})

复制代码

在 App.vue 中引入 data.json

import data from './data.json';
export default {
setup(){
const state = ref(data);
return{
state;
}
}
}

复制代码

在 App.vue 中引入 Editor组件

<template>
<div class="app">
<Editor :data = "state"></Editor>
</div>
</template>
<script>
// 拿到data.json中的数据
import data from './data.json';
import {ref} from "vue";
import Editor from "./packages/editor";
export default {
components:{
Editor,
},
// 整个程序的入口
setup(){
const state = ref(data);
return{
state
}
}
}
</script>
<style lang="scss">
.app{
position:fixed;
top:20px;
left: 20px;
right: 20px;
bottom: 20px;
}
</style>

复制代码

editor.jsx接收传过来的参数

import {defineComponent} from "vue";
export default defineComponent({
props: {
data: {type: Object};
}
setup(props){
return ()=> <div>Hello LowCode!</div>
}
})

复制代码

运行 npm run serve 后启动项目，我们就可以在界面上看到 Hello LowCode！这一串字符了。以后我们就可以直接在editer.jsx文件中，直接渲染页面和添加组件了，非常的方便。