一般写vue-cli创建项目的时候，组件是*.vue，这个组件里面的js部分都写在如下格式内：

export default {
  data() {},
  methods: {}
}

有时候页面的需求很大的时候，就要在*.vue的文件中既要写很多的html代码，还在在export default{}中写很多的代码，页面就很长。

方案一：

sample.js文件

export default {
  data() {},
  methods: {}
}

sample.vue 文件

import sample from './sample'

<script>
    export default {
        ...sample
    }
</script>

方案二、

一般来说，可以把你代码量最大的函数摘出来，然后写到一个js文件中，然后export供组件import。

不过解耦必然意味着要多写代码，而且单页面组件本身就是为了能够很好的追踪到每个模板对应的方法和样式。如果真的代码量很大，建议拆分成多个组件文件，而不是单纯的分离代码。