createjs技术博客

相信大家写vue的时候都会遇到一个问题，.vue太大怎么办？我这里教大家一个很简答的拆分方式，把vue文件拆成，vue+js/ts+css/less/scss模式。

首先一个简单vue文件代码是怎么样的？

<template>

</template>

<script setup>
export default {
  name: "test"
}
</script>

<style scoped>

</style>

很简单，就上面这样。那么我们拆分后变成什么样。

首先我们新建3个文件，这里我用js和scss，ts和less也是一样的。

然后填写代码：

vue:

<template>
  <div class="page"></div>
</template>

<script>
import script from "./script.js";
export default script
</script>
<!--下面这样也可以，但是有些ide会不识别script里面的代码，导致无法代码补全-->
<!--<script src="script.js"></script>-->

<style lang="scss" src="./style.scss" scoped></style>

js

export default {
    name: "index",
    //props负责读取参数,context负责emits事件
    setup(props,context)
    {
        return{
            //没有setup语法糖以后需要自己手动return
        }
    }
}

scss

.page{

}

好了文件拆分完成，我来讲一下这样写的优缺点:

优点：代码被分成了3份，就算不会拆分逻辑，单页的代码量都硬生生的减少到了3分之1，并且js部分就跟普通js文件一样了更容易拆分，写样式的时候也不需要在ide里上下滚动着写，2个文件切换就可以了，结构也更加简单明了（有点像写小程序）

缺点：setup语法糖没有了，很多东西写起来变复杂了，要多写很多东西，代码指向到js的时候你想找到源头的vue文件还需要到目录里找，麻烦，并且很多ide的自动填充代码变的无效，还有可能需要手动修改。

那么想要保留语法糖，又想拆分怎么办呢？那么就单独拆分css部分，只拆分css部分可以保留script的setup，并且ide也可以正常识别js和css，以用来自动补全。