如何分离vue文件中css、js代码
今天小编给大家分享一下如何分离vue文件中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
index.vue 基础代码
<!--界面代码--><template><divclass="mockDataTestView">mockDataTestView</div></template><!--这里引入分离的业务js代码--><script>importindexjsfrom'./index.js'exportdefault{...indexjs,}</script><!--这里引入分离的界面样式代码--><stylelang="scss"scoped>@import'./index.scss';</style>
index.scss 基础代码
.mockDataTestView{padding:10px;}
index.js 基础代码
exportdefault{name:'mockDataTestView',data(){return{}},mounted(){},created(){},methods:{},watch:{}}
以上就是“如何分离vue文件中css、js代码”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注恰卡编程网行业资讯频道。