vue css文件,vue.js前后端分离

　　本文主要介绍在vue文件中分离css和js代码的简单技巧。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

目录

　　场景方法索引. vue基本代码索引. scss基本代码索引. js基本代码扩展代码汇总

场景

　　1.因为早期iOS开发形成的MVC习惯，我个人喜欢把css和js代码独立放在一个文件里，也就是把样式模块和业务处理模块分开。2.编写复杂的接口和业务时，接口、样式和业务代码都放在。vue文件，代码量大，几千行，难受。剪吧(简单页面可以忽略)。3.基于vue2 cli3。

方法

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

　　比如mockDataTest.vue文件，在views目录下新建一个mockDataTest/font目录，在目录下创建**index.vue(主接口文件)、index.scss(接口样式代码)和index.js(业务js代码)，结构如下：

　　 - src

　　 -视图

　　 -模拟数据测试

　　 - index.vue

　　 - index.scss

　　 - index.js

index.vue 基础代码

　　！-接口代码-

　　模板

　　div class=mockDataTestView

　　mockDataTestView

　　/div

　　/模板

　　！-这里介绍单独的业务js代码-

　　脚本

　　从导入索引。/index.js

　　导出默认值{

　　.indexjs，

　　}

　　/脚本

　　！-这里引入了单独的接口样式代码-

　　style lang=scss 范围

　　@import 。/index . scss ；

　　/风格

index.scss 基础代码

　　。mockDataTestView {

　　填充：10px

　　}

index.js 基础代码

　　导出默认值{

　　名称：“mockDataTestView”，

　　data() {

　　返回{

　　}

　　},

　　已安装(){

　　},

　　已创建(){}，

　　方法：{

　　},

　　观察：{

　　}

　　}

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

拓展

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

代码

　　没什么好看的，够了。

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

总结

　　这就是本文关于在vue文件中分离css和js代码的简单技术。关于vue文件中CSS和JS代码的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。