Vue.js 中将 `<script>` 部分分离开 - 代码组织最佳实践 - 常规

在 Vue 中，可以将<script>部分分离开来，以便更好地组织代码和逻辑。

一种常见的方式是将 Vue 的组件定义和逻辑抽离到单独的文件中，然后在 Vue 组件中引入这些文件。具体步骤如下：

创建一个单独的 JavaScript 文件，例如myComponent.js，将 Vue 组件的定义和逻辑写在这个文件中。例如：

// myComponent.js
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
}

在 Vue 组件中引入这个文件，并使用import语句导入组件。例如：

// MyComponent.vue
<template>
  <div>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import myComponent from './myComponent.js';

export default {
  components: {
    myComponent
  }
}
</script>

这样，Vue 组件的定义和逻辑就被分离到了一个单独的文件中，可以更好地管理和组织代码。

另外，还可以使用 Vue 的单文件组件（Single File Component）来将 Vue 组件的模板、样式和逻辑分离到不同的部分。具体使用方法可以参考 Vue 官方文档中的相关内容。