vue文件中html、css、js都是默认在一个文件中的，当代码过多时不利于查找，因此这种情况下可以考虑分离。

vue文件默认格式如下

<template>
html代码
</<template>

<script>
js代码
</script>

<style>
css代码
</style>

1、全部分离

<template src="./main.html"></template>
<script src="./main.js"></script>
<style src="./main.scss"></style>

2、部分分离

将需要分离的部分提取出来，本质上与第一种一样，形式不限，可以只分离js或者css、html或者其中两种

<template>
html内容
</template>
<script src="./main.js"></script>
<style src="./main.scss"></style>