目录场景方法index.Vue 基础代码index.sCSS 基础代码index.js 基础代码拓展代码总结场景 1、因为早期是iOS开发,形成的mvc习惯,个人喜欢css、js代码
挺简单的,就是利用下es6的import和export
例如mockDataTest.vue文件,在views目录下新建一个mockDataTest</font>目录,目录里新建**index.vue(界面主文件)、index.scss(界面样式代码)、index.js(业务js代码),结构如下:
|-- src
|-- views
|-- mockDataTest
|-- index.vue
|-- index.scss
|-- index.js
<!--界面代码-->
<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>
.mockDataTestView {
padding: 10px;
}
export default {
name: 'mockDataTestView',
data() {
return {
}
},
mounted() {
},
created() {},
methods: {
},
watch: {
}
}
纯粹为了让一个文件里面代码量尽量少而已,便于阅读、编辑
上述是针对vue2、js、scss的方式,vue3、typescript也是可以的
没什么好看的,上面的够了。
代码,参考 views 里面的 mockDataTest
到此这篇关于分离vue文件中css、js代码的简单技巧的文章就介绍到这了,更多相关vue文件中css js代码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 分离vue文件中css、js代码的简单技巧
本文链接: https://lsjlt.com/news/143110.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0