站在巨人的肩膀上--用VUE3试试搞个在线IDE吧！

<div>
  <h2>这是第一个组件</h2>
  <B @changeMyData="changeMyData" :myData="myData"></B>
</div>
</template>
<script>
import B from "./B";
import { ref } from 'vue'
export default {
    components: { B },
    setup() {
        const myData = ref("100")
        const changeMyData = function (val) {
            myData = val;
        }
        return {
            myData,
            changeMyData
        }
    }
};
</script>

<template>
 <div>
   <h3>组件B</h3>
   <C v-bind="$attrs" ></C>
 </div>
</template>
<script>
import C from "./C";
export default {
 components: { C },
};
</script>

<template>
  <div>
    <h5>组件C</h5>
    <input v-model="myc" @input="hInput" />
  </div>
</template>
<script>
export default {
  props: ['myData'],
  emits:['changeMyData']

  setup(props,{emit}){
      const myc =props. myData;  // 在组件A中传递过来的属性
          const   hInput= function() {
          emit("changeMyData", myc); // // 在组件A中传递过来的事件
    
    return {
        hInput
    }
  }
};
</script>

export const setCatalogue = (currentSandbox): any[] => {

    const arr = _.cloneDeep([...currentSandbox.directories, ...currentSandbox.modules])
    function loop(parId?) {
        return arr.reduce((acc, cur) => {
            if (cur.directory_shortid == parId) {
                cur.children = loop(cur.id)
                acc.push(cur)
            }
            return acc
        }, [])
    }
    return loop()
}

<template>
    <Codemirror style="font-size: 16px;" ref="CodemirrorRef" v-model="code" :style="{ height: '100%' }"
        :autofocus="true" :indent-with-tab="true" :tabSize="2" :extensions="extensions" @change="change">
    </Codemirror>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
import { setLang } from 'utils/index'
import { javascript } from '@codemirror/lang-javascript'
import { css } from "@codemirror/lang-css";
import { html } from "@codemirror/lang-html";
import { json } from "@codemirror/lang-json";
import { markdown } from "@codemirror/lang-markdown";
import _ from 'lodash'
const langType = {
    js: javascript,
    css: css,
    scss: css,
    vue: html,
    jsx: () => javascript({ jsx: true, typescript: true }),
    ts: () => javascript({ jsx: true, typescript: true }),
    html,
    json,
    md: markdown
}
const setLang = (type) => langType[type]()
const emit = defineEmits(['change'])
const props = defineProps({
    code: String,
    type: String
})
const extensions = computed(() => [setLang(props.type), oneDark])
const CodemirrorRef = ref(null)
const change = (e) => {
    emit('change', e)
}
</script>
<style>
</style>

import { SandpackClient } from "packages/SandpackClient";
// 数据源
const VUE_TEMPLATE_3 = {
  files: {
    "/src/App.vue": {
      code: `<template>
    <main id="app">
      <h1>{{ helloWorld }}</h1>
    </main>
  </template>
                               
  <script>
  import { ref } from "vue";
  export default {
     name: "App",
     setup() {
        const helloWorld = ref("Hello World");
        return { helloWorld };
     }
  };
  </script>
                               
  <style>
  #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
  </style>   
  `,
    },
    "/src/main.js": {
      code: `import { createApp } from 'vue'
  import App from './App.vue'
              
  createApp(App).mount('#app')            
  `,
    },
  },
  dependencies: {
    "core-js": "^3.6.5",
    vue: "^3.0.0-0",
    "@vue/cli-plugin-babel": "4.5.0",
  },
  entry: "/src/main.js",
  environment: "vue-cli",
};
// 初始化
const SandpackClientStore = new SandpackClient(
                el,
               VUE_TEMPLATE_3,
                {
                    showOpenInCodeSandbox: false
                }
             );
 // 代码跟新
 
 SandpackClientStore.updatePreview(VUE_TEMPLATE_3);
            

import { createStore } from 'vuex'
import { data } from './dome'
import { SandpackClient } from "packages/SandpackClient";
import { setCatalogue, conversionCode } from 'utils/index'
let SandpackClientStore = null
// 创建一个新的 store 实例
export default createStore({
    state() {
        return {
            currentSandbox: data,
            currentCode: {
                title: '',
                code: ''
            },
        }
    },
    mutations: {
        SETCURRENTCODE(state: any, code) {
            state.currentCode = code
        },
        SETCURRENTSANDBOX(state) {
            const modules = state.currentSandbox.modules
            modules.find((item) => {
                if (item.id == state.currentCode.id) {
                    item.code = state.currentCode.code
                    return
                }

            })
        }
    },
    actions: {
        setCurrentCode({ commit }, code) {
            commit('SETCURRENTCODE', code)
        },
        setClient({ getters }, el) {
            SandpackClientStore = new SandpackClient(
                el,
                getters.project,
                {
                    showOpenInCodeSandbox: false
                }
            );
        },
        setUpdatePreview({ commit, getters }) {
            commit('SETCURRENTSANDBOX')
            SandpackClientStore.updatePreview(getters.project);
        },

    },
    getters: {
        // 入口文件
        entryFile(state) {
            return state.currentSandbox.entry.split('/')
        },
        // 文件目录
        catalogueStructure(state) {
            return setCatalogue(state.currentSandbox)
        },
        // 项目代码
        project(state) {
            return conversionCode(state.currentSandbox)
        }
    }
})
复制代码