分离vue文件中css、js代码的简单技巧

更新时间：2022年03月19日 14:06:57 作者：liyoro2

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

场景

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

方法

挺简单的，就是利用下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>
  <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 基础代码

.mockDataTestView {
    padding: 10px;
}

index.js 基础代码

export default {
  name: 'mockDataTestView',
  data() {
    return {

    }
  },
  mounted() {
  },
  created() {},
  methods: {
  },
  watch: {
  }
}

纯粹为了让一个文件里面代码量尽量少而已，便于阅读、编辑

拓展

上述是针对vue2、js、scss的方式，vue3、typescript也是可以的

代码

没什么好看的，上面的够了。

代码，参考 views 里面的 mockDataTest

总结

到此这篇关于分离vue文件中css、js代码的简单技巧的文章就介绍到这了,更多相关vue文件中css js代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

教你使用vue3写Json-Preview的示例代码
这篇文章主要介绍了用vue3写了一个Json-Preview的相关知识,引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
让Vue响应Map或Set的变化操作
这篇文章主要介绍了让Vue响应Map或Set的变化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue路由守卫详解
路由导航守卫提供了一些钩子函数,可以在路由导航过程中进行拦截和控制,其中,beforeEach 导航守卫可以在每次路由切换前被触发,本文给大家介绍Vue路由守卫详解,感兴趣的朋友一起看看吧
2023-10-10
vue实现滚动条始终悬浮在页面最下方
这篇文章主要为大家详细介绍了vue实现滚动条始终悬浮在页面最下方，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue实现点击后文字变色切换方法
下面小编就为大家分享一篇Vue实现点击后文字变色切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
还在用vuex?来了解一下pinia
这篇文章主要为大家详细介绍了pinia，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
2022-02-02
Vue中构造数组数据之map和forEach方法实现
数组操作是前端最重要的数据操作，构造数组数据，又是数组操作中很常见的，本文将梳理下map和forEach方法在Vue项目中的使用，感兴趣的朋友跟随小编一起看看吧
2022-09-09
vue引入axios同源跨域问题
这篇文章主要介绍了vue引入axios同源跨域问题，文章给大家提供了解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
利用FetchEventSource在大模型流式输出的应用方式
这篇文章主要介绍了利用FetchEventSource在大模型流式输出的应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vite多页面配置项目实战
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04