1

我正在我的项目中编写一个 Vue 单页组件，该组件是使用Laravel Mix捆绑的。我想将一些逻辑提取到它自己的类中，以便可以轻松地在其他组件中重用它（但这不是应该是 Vue 组件本身的逻辑）。

我创建了一个新类并将其放在TimeRangeConverter.js与我的 Vue 组件相同的目录中。

export default class TimeRangeConverter {
    static getFromTimestamp() {
        return 1;
    }
}

在我的组件中，我像往常一样导入它：

<template>
    <div>
        Example component
    </div>
</template>

<script>
    import './TimeRangeConverter';

    export default {
        mounted() {
            console.log(TimeRangeConverter.getToTimestamp());
        }
    }
</script>

但是 Vue 抛出一个错误说ReferenceError: TimeRangeConverter is not defined.

我正在使用webpack.mix.jsLaravel 5.7 附带的默认配置文件：

mix.js('resources/js/app.js', 'public/js');

在我的主app.js文件中，我会自动包含 Vue 组件：

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

将此类导入Vue组件以供使用的正确方法是什么？

4

1 回答 1

0

您应该使用以下语法在组件代码中导入您的类：

 import TimeRangeConverter from './TimeRangeConverter';
于 2019-02-02T16:14:06.340 回答