广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >分离vue文件中css、js代码的简单技巧
  • 563
分享到

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

2024-04-02 19:04:59 563人浏览 薄情痞子
摘要

目录场景方法index.Vue 基础代码index.sCSS 基础代码index.js 基础代码拓展代码总结场景 1、因为早期是iOS开发,形成的mvc习惯,个人喜欢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的方式,vue3typescript也是可以的

代码

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

代码,参考 views 里面的 mockDataTest

总结

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

--结束END--

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

本文链接: https://www.lsjlt.com/news/143110.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分离vue文件中css、js代码的简单技巧
    目录场景方法index.vue 基础代码index.scss 基础代码index.js 基础代码拓展代码总结场景 1、因为早期是iOS开发,形成的MVC习惯,个人喜欢css、js代码...
    99+
    2022-11-13
  • 如何分离vue文件中css、js代码
    今天小编给大家分享一下如何分离vue文件中css、js代码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。场景因为早期是iOS...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作