vue文件，分离样式模块和业务处理模块

index.vue 基础代码

<!--界面代码-->
<template>
  <div class="mockDataTestView">mockDataTestView：{{nameStr}}</div>
</template>

<!--这里引入分离的业务js代码-->
<script>
import { defineComponent } from "vue";
import inde from "./index";

export default defineComponent({
  ...inde,
});
</script>

<!--这里引入分离的界面样式代码-->
<style scoped>
@import "./index.css";
</style>

index.css 基础代码

.mockDataTestView {
  padding: 10px;
  border:1px solid #ccc;
}

index.js 基础代码

import { ref } from "vue";
export default {
  name: 'mockDataTestView',
  setup() {
    const nameStr = ref('leolee');
    setTimeout(() => {
      nameStr.value = 'leolee 123'
    }, 2000)
    return { nameStr }
  }
}

也可以创建三个文件

<!-- App.vue -->
<template>
  <div class="mockDataTestView demo">mockDataTestView：{{nameStr}}</div>
</template>
<script src="./index.js"></script>
<style src="./index.css"></style>

<template>
  <div class="mockDataTestView demo">mockDataTestView：{{nameStr}}</div>
</template>
<script src="./index.js"></script>
<style scoped src="./index.css"></style>
<style scoped>
.demo {
  color: brown;
}
</style>

//index.js
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: 'mockDataTestView',
  setup() {
    const nameStr = ref('leolee');
    setTimeout(() => {
      nameStr.value = 'leolee 123'
    }, 2000)
    return { nameStr }
  }
});

.mockDataTestView {
  padding: 10px;
  border:1px solid #ccc;
}