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:{}
}