将vue文件的template和js拆分开

index.vue 文件的代码

<template>
    <div>
        <h1>{{title}}</h1>
        <p>{{message}}</p>
    </div>
</template>

index.js文件

import Vue from 'vue'
import indexComp from './index.vue'
export default  Vue.extend({
    mixins: [indexComp],
    data(){
        return{
            title:'大标题',
            message:'我是分开的js文件'
        }
    },
    created(){
        this.hello();
    },
    methods: {
      hello: function () {
        console.log('hello from mixin!')
      }
    }
  });

在使用组件的时候直接引入index.js即可

<template>
   <div>
       <testComp></testComp>
   </div>
</template>
<script>
import testComp from './components/test/index.js'
   export default {
       components:{
           testComp,
       },
   }
</script>