我可以在 Vue.js 中为 ViewModel 需要/导入文件吗？答案

【问题标题】：Can I require/import files for a ViewModel in Vue.js?我可以在 Vue.js 中为 ViewModel 需要/导入文件吗？
【发布时间】：2018-01-09 23:53:40
【问题描述】：

我正在将 Vue.js 用于 MVVM 项目，并且我想尽可能地将 View 和 ViewModel 分离出来以进行代码可维护性和测试。这是我的 Example.vue 文件：

<template>
    <div>
        <h1>Example: {{message}}</h1>
    </div>
</template>
<script>
require('../ViewModels/Example');
export default {
    data() {
        return new Example();
    }
}
</script>

然后这里是 Example.js 文件：

class Example {
    constructor() {
        this.message = "Hello World";
    }
}

但我收到一个错误：“ReferenceError：未定义示例” 如果我将 Example 类粘贴到我的脚本标记中，它可以正常工作，但是当我尝试导入或要求它时不起作用。有人知道为什么吗？

【问题讨论】：

你要么需要导出类，要么需要显式声明它，即var Example = require('../ViewModels/Example')
如果这样做，我会收到错误：“示例不是构造函数。”

标签： javascript laravel mvvm vue.js

【解决方案1】：

我想通了。我需要以特定方式导入和导出，所以我的 Example.vue：

<template>
    <div>
        <h1>Example: {{message}}</h1>
    </div>
</template>

<script>
    import Example from '../ViewModels/Example';

    export default {
        data() {
            return new Example();
        }
    }
</script>

还有我的 Example.js 类文件：

export default class Example {
    constructor() {
        this.message = "Hello World";
    }
}

【讨论】：