javascript - 如何将 Vue 文件的脚本部分分离到另一个文件？

Question

我项目中的一个 vue 文件变得太大了。我想将它的脚本部分分成一个 js 文件。在 js 文件中，我导出了 Vue 对象；

export default new Vue({
  data: {
    search: "",
    ...

并在vue文件中导入；

<script src="./RecordNameTable.js">
</script>

但这行不通，它会出错。我可以将其导入为 .vue 文件，该文件具有 <script></script> 之间的经典 Vue 语法。标签。但我不想要这个。如何解决这个问题？

Answer 1

您必须从外部脚本导出一个对象，而不是 Vue 实例。

这是一个简单的解决方案

App.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

// This will work
<script src="./app.js"></script>

// this will work too
<script>
    import App from './app.js';

    export default App;
</script>

app.js

export default {
    data(){
        return {
            message: "Hello world"
        };
    }
}