如何从外部文件导入Vue.js组件

Question

我在HTML脚本标签中有路由块

const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ];

如何导入存储为单独文件的Foo.vue文件的内容？

Foo.vue

<template>
    <div>
        foo
    </div>
</template>

我尝试了不同的方法，例如脚本id =“ foo” src =“ js / foo.vue”或直接导入代码块，但是它们均无效。

Vue.js是否可以导入外部vue文件的内容？

index.html的：

<script id="foo" src="js/foo.vue"></script>
<script>
    Vue.use(VueMaterial.default);

//    const Foo = {template: '<div>foo</div>'};
    const Bar = {template: '<div>bar</div>'};

    const routes = [
        {path: '/foo', component: Vue.component('foo')},
        {path: '/bar', component: Bar}
    ];

    const router = new VueRouter({
        routes
    });

    new Vue({
        name: "Normal",
        router
    }).$mount("#app");
</script>

Answer 1

如果您看下面的示例，则我的组件有单独的文件； 使用vue-class-component / vue-property-decorator的打字稿文件，一个html文件和一个less文件。 然后，我将所有这些添加到.vue文件的相关标签中。 我发现必须从要导入的文件中导入和导出班级。

<template src="./example.html"></template>
<script lang="ts">
import ExampleClass from './example-class';
export default ExampleClass;
</script>
<style lang="less" src="./example.less"></style>

通过将它们全部保存在单独的文件中，如果在vue文件中还有另一个vue组件，则可以仅导入类内容，而不是完整的.vue文件。

希望这可以帮助