vue项目 抽离出script标签里的逻辑代码

1.需求：

.vue文件的template内容较多，不便于开发，写逻辑和样式的时候要翻很久，此时将script逻辑代码抽离就可解决这一问题

通常情况下，在单 .vue 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 script 和 template 部分，用编辑器分屏也不是那么好操作，故有了组件 script 分离

2.实现

// UserInfo.vue页面
<template>
    <div>
       姓名：{{userInfo.name}}
    </div>
</template>

<script>
import index from './index'
export default index
</script>

// 同级创建index.js
export default {
  name: "UserInfo",
  data(){
    return {
      userInfo: {
      	name: "张三"
      }
    }
  }
}

参考文章：https://nowtime.cc/vue/1524.html