场景
- 1、这只是我的编程习惯，个人喜欢css、js代码独立放一个文件里面
- 2、写复杂界面的时候，界面、样式、业务代码都放.vue文件里面，代码量很大，几千上万行的，难受，割了吧
- 3、基于vue cli3项目
方法
挺简单的，就是利用下ES6的import和export
例如mockDataTest.vue文件，在views目录下新建一个mockDataTest目录，目录里新建index.vue（界面主文件）、index.scss（界面样式代码）、index.js（业务js代码），结构如下：
复制代码
1
2
3
4
5
6
7|-- src |-- views |-- mockDataTest |-- index.vue |-- index.scss |-- index.js
index.vue 基础代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!--界面代码--> <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 基础代码
复制代码
1
2
3
4.mockDataTestView { padding: 10px; }
index.js 基础代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15export default { name: 'mockDataTestView', data() { return { } }, mounted() { }, created() {}, methods: { }, watch: { } }
纯粹为了让一个文件里面代码量尽量少而已，便于阅读、编辑
拓展
上述是针对vue2、js、scss的方式，vue3、typescript也是可以的
代码
没什么好看的，上面的够了。
代码，参考 views 里面的 mockDataTest
最后
以上就是神勇诺言最近收集整理的关于vue文件，分离样式模块和业务处理模块的全部内容，更多相关vue文件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复