Javascript 带有单个文件组件的WordPress Vue插件-无法使用导入

我是WP和Vue.js的新手 我正在尝试为Vue中的WP创建一个插件，它从WP API获取数据并打印一个简单的表

以下是我的插件文件：

自定义插件\u name.php

<?php

/**
 * Plugin Name: custom_plugin_name
 * Description: WordPress Vue.js plugin
 * Version: 1.0
 */


// Register API Endpoints
[...]


// Register scripts
function func_load_vuescripts() {
    // Register Vue.js and scripts
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ) . 'vuecode.js', 'wpvue_vuejs', true );
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');


// Create shortscode function
function func_wp_vue() {

    // Load Vue.js and scripts
    wp_enqueue_script('wpvue_vuejs');
    wp_enqueue_script('my_vuecode');

    return file_get_contents(plugin_dir_path(__FILE__) . './App.vue');
}

// Add shortscode
add_shortcode( 'wpvue', 'func_wp_vue' );

---

您需要在
vuecode.js
文件中导入所有vue组件。此外，请确保在实例化vue.js应用程序时指定所有组件

import App from './App.vue'
import AppTable from './components/Table.vue';

var app = new Vue({
    el: '#vuejs-container',
    template: '<App/>',
    components: { 
        App,
        AppTable
    }
})

从“./App.vue”导入应用程序
从“./components/Table.vue”导入AppTable；
var app=新的Vue({
el:“#vuejs容器”，
模板：“”，
组件：{
应用程序，
适用
}
})
你说得对！非常感谢。现在我在控制台中遇到了一个新问题。加载模块脚本失败：服务器使用非JavaScript MIME类型“text/html”进行响应。根据html规范对模块脚本执行严格的MIME类型检查。“每个.vue文件一个。您是否尝试直接在JavaScript中导入vue文件？因为vue组件必须先编译成JS
<template>
    <div id="vuejs-container">
        <h1>My Todo App!</h1>
        <AppTable/>
    </div>
</template>

<script>
    import AppTable from "./components/Table.vue";

    export default {
        components: {
            AppTable
        }
    };
</script>

import App from './App.vue'
import AppTable from './components/Table.vue';

var app = new Vue({
    el: '#vuejs-container',
    template: '<App/>',
    components: { 
        App,
        AppTable
    }
})