创建项目

  • Vue3.x
  • Scss

删掉不需要的内容

src目录下新建全局配置data.json

1
2
3
4
5
6
7
{
    "container": {
        "width": "550px",
        "height": "550px"
    },
    "blocks": []
}

src新建packages文件夹，用jsx来写，方便一些，代码也清爽。不用模板写，很多功能用模板来写，稍微复杂一些

用vue-cli创建的项目，本身就支持jsx

定义packages/editor.jsx

1
2
3
4
5
6
7
8
9
10
11
12
import { defineComponent } from "vue";

export default defineComponent({
    setup(props) {
        console.log(props.data)

        return () => <div>editor</div>
    },
    props: {
        data: {type: Object}
    }
})

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div class="app">
    <Editor :data="state"></Editor>
  </div>
</template>

<script>
import data from './data.json';
import {ref} from 'vue';
import Editor from './packages/editor.jsx';

export default {
  setup() {
    const state = ref(data)
    
    return {
      state
    }
  },
  components: {
    Editor
  }
}
</script>

<style lang="scss">

</style>