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

目录

为什么要搭建低代码平台？

低代码平台的组成和预期结果

项目初始化搭建

创建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文件中，直接渲染页面和添加组件了，非常的方便。