Question

我在HTML Script标签中有路径阻止

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

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

Foo.vue

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

我尝试过不同的方法，例如script 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文件的typescript文件。然后，我将所有这些添加到.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文件。

希望这会有所帮助

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

1 个答案: