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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div class = "loginModuel">

</div>
</template>

<script>
import index from "./index"
export default{
...index
}
</script>
<style lang = "scss" scoped>
@import "./index.scss";
</style>

index.js

1
2
3
4
5
6
7
export default{
data(){
return{
msg:"这是登录页面"
}
}
}

棒极了

转载请保持原始链接

原始链接: https://ru23.com/note/511d4361.html