分离vue文件中css、js代码的简单技巧
作者：liyoro2
这篇文章主要给大家介绍了关于分离vue文件中css、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.jsindex.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;
}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代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！