文件中分离css和js代码的简单知识

这篇文章主要给大家介绍了关于分离vue文件中css、js代码的简单技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

场景1、因为早期是iOS开发，形成的MVC习惯，个人喜欢css、js代码独立放一个文件里面，也就是分离样式模块和业务处理模块2、写复杂界面、复杂业务的时候，界面、样式、业务代码都放.vue文件里面，代码量很大，几千上万行的，难受，割了吧（简单页面可忽略）3、基于vue2 cli3项目

方法

很简单，就是利用ES6的导入导出。

如mockDataTest.vue文件，在views目录下新建一个mockDataTestlt/fontgt。目录，其中新建了**index.vue(主界面文件)、index.scss(界面风格代码)和index.js(业务js代码)，结构如下:

|-- src |-- views |-- mockDataTest |-- index.vue |-- index.scss |-- index.js

index.vue 基础代码lt;!--界面代码--gt;lt;templategt; lt;div class="mockDataTestView"gt; mockDataTestView lt;/divgt;lt;/templategt;lt;!--这里引入分离的业务js代码--gt;lt;scriptgt;import indexjs from './index.js'export default { ...indexjs,}lt;/scriptgt;lt;!--这里引入分离的界面样式代码--gt;lt;style lang="scss" scopedgt;@import './index.scss';lt;/stylegt;

index.scss 基础代码.mockDataTestView { padding: 10px;}

index.js 基础代码export default { name: 'mockDataTestView', data() { return { } }, mounted() { }, created() {}, methods: { }, watch: { }}

只是为了让一个文件中的代码量尽可能小，便于阅读和编辑。

拓展

以上方法是针对vue2，js和scss的，vue3和typescript也可以。

代码

没什么好看的，够了。

代码，请参考视图中的mockDataTest。

总结

这就是本文关于在vue文件中分离css和js代码的简单技术。关于vue文件中CSS和JS代码的更多信息