在工作中，用vue进行开发的，后来发现.vue文件中的逻辑处理特别多的话，那么会导致代码会特别长，即使你打了标签，都觉得写起来很不方便，所以就引发了我的思考，能不能把js和scss单独拎出去，vue文件只是负责写html的，后来我就在网上一顿查啊，终于，功夫不负有心人，让我给查到了，在官网上有这样的一段话

所以大家都懂的（挑眉笑奸笑）下面我就给大家演示一下把vue文件的html、scss、js如何分开写：

首先先在vue统计目录下新建一个js、scss文件，如下图所示，名字无所谓，你叫index.js和index.scss都行

然后在vue文件中这样写

<template>
    <div class = "loginModuel">
        {{msg}}
        <div>哈哈哈</div>
        <span>你好啊。哈哈</span>
        <a href="">百度啊啊啊</a>
    </div>
</template>

<script src = "./index.js"></script>
<style lang = "scss" scoped src = "./index.scss"></style>

在index.js中这样写：

export default{
    data(){
        return{
            msg:"这是登录页面"
        }
    }
}

意思就是把vue 中 export default那一套全部写在js文件中，然后再在vue文件中引入，引入之后，就这样就ok了

	<script src = "./index.js"></script>

最后index.scss这样写,就是正常写scss代码

.loginModuel{
    div{
       font-size: 30px;
       color:red; 
    }
    span{
        font-size:50px;
        color:blue;
    }
    a{
        font-size:30px;
        color:pink;
    }
}

写完后引入vue文件中，直接通过src引入就行

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

然后大家看下运行效果

照样可以实现页面，这样一改是不是感觉跟传统开发没什么区别了啊，vue文件就相当于html文件，js和css单独写，棒极了！！