vue单文件代码行数太多，该怎么进行优化

Question

使用vue开发单页面应用时，经常会遇到一个.vue文件代码上千行的情况，并且还是把可复用的组件抽取出来了的前提下，个人觉得代码行数太多不好维护，查找起来滚动条要拖老长了。如图：

上面这个页面，template+script已经有1400多行，要查找一个地方麻烦的很。
对于这种情况，我有一个想法：就是利用vue的mixin，把业务逻辑中的每一部分功能的js都写到mixin里面去。但不知道这样做好不好，或者还有没有其他办法？

Answer 1

将vue文件script代码抽取到单独的js文件

test.vue

<script>
import test from './test.js'
export default test
</script>

test.js

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

Answer 2

我看你这个文件名字,是商户中心?商家中心?总之是类似后台管理的页面吧?
在我的认识当中,这个层级的页面,业务逻辑应该是比较抽象的,逻辑细节应该写在更细小的组件里.比如这个页面也许是导航栏,侧边栏,数据面板,交易记录等等几个模块组成的,他们应该是相互独立的,也应该是分别实现的.

反过来说呢,一个文件1000多行倒也不算很多,毕竟是template和script加在一起1000多行,代码逻辑清晰的情况下并不麻烦,实际上还是代码逻辑拆分是否合理的问题.

Answer 3

我会把每个功能组件化，每个组件都有单一的功能，和UI样式，讲究存粹性。