Vue 3 独立组件挂载：在现有HTML中灵活集成Vue组件

import { createVNode, render } from 'vue';

/**
 * 将Vue组件挂载到指定的DOM元素上
 * @param {Object} appInstance - Vue 3 应用实例 (用于提供上下文)
 * @param {HTMLElement} targetElement - 目标DOM元素，Vue组件将渲染到此处
 * @param {Object} componentDefinition - 要挂载的Vue组件定义
 * @param {Object} props - 传递给组件的props对象
 * @returns {Object} 挂载组件的实例
 */
function mountComponent(appInstance, targetElement, componentDefinition, props) {
    // 1. 创建虚拟节点 (VNode)
    let vNode = createVNode(componentDefinition, props);

    // 2. 将Vue应用上下文附加到虚拟节点
    // 这是确保组件能够访问到全局注册的组件、插件、provide/inject等的关键
    vNode.appContext = appInstance._context;

    // 3. 将虚拟节点渲染到指定的DOM元素
    render(vNode, targetElement);

    // 返回组件实例，如果需要进一步操作（例如调用组件方法）
    return vNode.component;
}

├── src/
│   ├── main.js             // 入口文件
│   ├── App.vue             // 根App组件 (可选，主要用于获取上下文)
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   └── AnotherWidget.vue
│   └── assets/
│       └── main.css
└── index.html              // 后端渲染的HTML页面

import './assets/main.css';
import { createVNode, render, createApp } from 'vue';
import App from './App.vue'; // 假设你有一个根App.vue，主要用于获取全局上下文

// 定义核心的mountComponent函数
function mountComponent(appInstance, targetElement, componentDefinition, props) {
    let vNode = createVNode(componentDefinition, props);
    vNode.appContext = appInstance._context; // 确保组件能访问到全局上下文
    render(vNode, targetElement);
    return vNode.component;
}

// 1. 创建一个“虚拟”Vue应用实例以获取上下文
// 挂载到一个隐藏的DOM元素上，避免影响页面布局。
// 即使App.vue是空的，也提供了一个完整的Vue应用上下文。
const $appRoot = document.createElement('div');
$appRoot.id = 'vue-context-app-root'; // 给予一个唯一的ID
$appRoot.style.display = 'none'; // 隐藏此根元素
document.body.appendChild($appRoot);
const app = createApp(App).mount($appRoot); // 挂载到隐藏元素以获取上下文

// 2. 使用Vite的import.meta.glob动态导入所有Vue组件
// glob模式 '@/components/**/*.vue' 会匹配 src/components 及其子目录下的所有 .vue 文件
const componentModules = import.meta.glob('@/components/**/*.vue');

// 3. 遍历所有导入的组件并挂载到匹配的DOM元素
for (const path in componentModules) {
    // 从文件路径提取组件标签名 (例如: src/components/HelloWorld.vue -> hello-world)
    const fileName = path.match(/([^/]+).vue$/)?.[1];
    if (!fileName) continue;

    // 将驼峰命名 (e.g., HelloWorld) 转换为短横线命名 (e.g., hello-world)
    // 这是HTML自定义标签的常见命名规范
    const tagName = fileName.split(/(?=[A-Z])/g).join('-').toLowerCase();

    // 异步加载组件模块
    componentModules[path]().then(({ default: componentDefinition }) => {
        // 查找页面中所有匹配的自定义标签元素
        document.querySelectorAll(tagName).forEach(elem => {
            // 提取HTML属性作为组件props
            const props = [...elem.attributes]
                .filter(attr => attr.name.startsWith(':')) // 过滤以 : 开头的属性 (Vue绑定的props)
                .reduce((acc, attr) => {
                    // 移除 : 前缀，并尝试解析值。
                    // 注意：HTML属性值总是字符串，如果需要数字、布尔或对象，需要进行类型转换。
                    // 简单示例直接赋值，复杂场景可能需要 JSON.parse 或其他解析逻辑
                    acc[attr.name.slice(1)] = attr.value;
                    return acc;
                }, {});

            // 挂载组件
            mountComponent(app, elem, componentDefinition, props);

            // 可选的DOM清理步骤：
            // 如果Vue组件的template会完全替代elem的内容，
            // 且原始elem内部没有需要保留的子节点，可以移除原始elem。
            // 如果原始elem有内容需要保留或在Vue组件外部显示，则此步骤需要谨慎处理。
            // 例如：将原始DOM元素内的子节点移动到组件挂载点之前，然后移除原始元素
            // [...elem.children].forEach(child => elem.parentNode.insertBefore(child, elem));
            // elem.remove(); // 移除原始占位元素，避免页面上出现重复内容或空标签
        });
    });
}

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: 'Hello, Vue!',
    },
  },
  name: "HelloWorld", // 建议为组件指定name
};
</script>

<style lang="scss">
/* 你的组件样式，默认是Scoped CSS，不会污染全局 */
.hello-world {
  text-align: center;
  color: #42b983;
}
</style>

<!