Vue组件编辑器

功能

1. 支持基座是Vue的情形下运行
2. 支持样式穿透
3. 支持自动导入

特性

1. 插件使用了esm CDN库 esm.sh 需要联网环境
2. 插件定义了全局变量custom_component_data

使用方式

import {
    RootFolder,
    CompileFile,
    ProjectFolder,
    AutoImportSystem,
} from '@lyudongzhou/vue-code-editor';
const text = `
<template>
<div>{{welcome}}</div>
</template>
<script>
import {ref} from "vue";
const welcome = ref("Hello World");
</script>
`;
const index = `
import { createApp } from 'vue';
const element = document.getElementById('display_component');
const app = createApp(a);
app.mount(element);
window.__app = app;`;

const destroy = `
if (window.__app) {
    window.__app.unmount();
}
`;

let f = null;
AutoImportSystem.regModel(() => {
    const test = new ProjectFolder('test', 'index.js', 'destroy.js');
    f1 = new CompileFile('test.vue', props.content);
    const f2 = new CompileFile('index.js', index);
    const f3 = new CompileFile('destroy.js', destroy);
    test.add(f1);
    test.add(f2);
    test.add(f3);
    RootFolder.add(test);
    test.exe();
    // 动态渲染
    // f.code = " your code "
});
function getDependencies(){
    console.log(f.dependencies);
}