分离vue⽂件中css、js代码的简单技巧
⽬录
场景
⽅法
index.vue 基础代码
index.scss 基础代码
index.js 基础代码
拓展
代码
总结
场景
1、因为早期是iOS开发，形成的MVC习惯，个⼈喜欢css、js代码独⽴放⼀个⽂件⾥⾯，也就是分离样式模块和业务处
理模块
2、写复杂界⾯、复杂业务的时候，界⾯、样式、业务代码都放.vue⽂件⾥⾯，代码量很⼤，⼏千上万⾏的，难受，割了
吧（简单页⾯可忽略）
3、基于vue2 cli3项⽬
⽅法
挺简单的，就是利⽤下ES6的import和export
例如mockDataTest.vue⽂件，在views⽬录下新建⼀个mockDataTest</font>⽬录，⽬录⾥新建**index.vue（界⾯主⽂件）、index.scss（界⾯样式代码）、index.js（业务js代码），结构如下：
|-- src
|-- views
|-- mockDataTest
|-- index.vue
|-- index.scss
|-- index.js
index.vue 基础代码
<!--界⾯代码-->
<template>
<div class="mockDataTestView">
mockDataTestView
</div>
</template>
<!--这⾥引⼊分离的业务js代码-->
<script>
import indexjs from './index.js'
export default {
...indexjs,
}
</script>
<!--这⾥引⼊分离的界⾯样式代码-->
<style lang="scss" scoped>
@import './index.scss';
</style>
index.scss 基础代码
.mockDataTestView {
padding: 10px;
}好看的css代码
index.js 基础代码
export default {
name: 'mockDataTestView',
data() {
return {
}
},
mounted() {
},
created() {},
methods: {
},
watch: {
}
}
纯粹为了让⼀个⽂件⾥⾯代码量尽量少⽽已，便于阅读、编辑
拓展
上述是针对vue2、js、scss的⽅式，vue3、typescript也是可以的
代码
没什么好看的，上⾯的够了。
，参考 views ⾥⾯的 mockDataTest
总结
到此这篇关于分离vue⽂件中css、js代码的简单技巧的⽂章就介绍到这了，更多相关vue⽂件中css js代码内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。