返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/143110.html(转载时请注明来源链接)

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

猜你喜欢
  • 分离vue文件中css、js代码的简单技巧
    目录场景方法index.vue 基础代码index.scss 基础代码index.js 基础代码拓展代码总结场景 1、因为早期是iOS开发,形成的MVC习惯,个人喜欢css、js代码...
    99+
    2024-04-02
  • 如何分离vue文件中css、js代码
    今天小编给大家分享一下如何分离vue文件中css、js代码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。场景因为早期是iOS...
    99+
    2023-06-29
  • CSS简化代码的小技巧有哪些
    这篇文章给大家分享的是有关CSS简化代码的小技巧有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。注意:为叙述简洁,自定义属性的兼容方案将不再在下文中赘述,但在实际项目中大家别...
    99+
    2024-04-02
  • 21 个简洁的 JavaScript单行代码技巧
    JavaScript 发展至今已经变得越来越强大,且广泛用于前端和后端开发。 作为一名前端程序员,不断的学习精进技巧,了解JS的最新发展也是非常必要的,而简洁的一行代码示例就是很好的方法。 今天,我们有 21 个JavaScript单行代码...
    99+
    2023-10-21
    okhttp
  • 分享3个简单的Python代码高效运行技巧
    目录1. 引言2. 获取字典的值3. 循环中使用enumerate4. 使用f-strings来拼接和打印字符串5. 总结1. 引言 小伙伴们日常工作中都必不可少地使用Python实...
    99+
    2024-04-02
  • JS开发中让代码更简洁的技巧有哪些
    本文小编为大家详细介绍“JS开发中让代码更简洁的技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“JS开发中让代码更简洁的技巧有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1 转换布尔值除了常规的布...
    99+
    2023-06-27
  • 使用nodejs怎么分离html文件中的js和css
    使用nodejs怎么分离html文件中的js和css,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。直接上代码:// ...
    99+
    2024-04-02
  • CSS应用中小技巧代码的示例分析
    小编给大家分享一下CSS应用中小技巧代码的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一.清除浮动方法1:#test{...
    99+
    2024-04-02
  • VUE 单文件组件的高级使用技巧
    1. 混合式模板 SFC 允许您将 HTML、CSS 和 JavaScript 组合到一个文件中。通过使用包含 name 属性的 <template> 部分,您可以指定外部 HTML 模板文件。这可以使您将模板逻辑与组件的其他...
    99+
    2024-04-02
  • Vue递归组件使用技巧实例代码分析
    这篇文章主要介绍“Vue递归组件使用技巧实例代码分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue递归组件使用技巧实例代码分析”文章能帮助大家解决问题。痛点引出在平时的开发当中,渲染侧边栏导航...
    99+
    2023-07-05
  • 如何使用nodejs分离html文件里的js和css
    这篇文章主要介绍如何使用nodejs分离html文件里的js和css,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!摘要: 本文要实现的内容,使用nodejs 对文件的增删改查,演示的...
    99+
    2024-04-02
  • 分享几个写简洁java代码的小技巧
    目录1.定义配置文件信息2.用@RequiredArgsConstructor代替@Autowired3.不要返回null4.ifelse5.减少controller业务代码6.将字...
    99+
    2024-04-02
  • 18个帮你简化代码的Python技巧分享
    目录什么是单行代码为什么我需要它们开始1.if-else2. elif3. if4.函数5.循环(列表推导式)6. if 循环7. if else 循环8. While 循环与 if...
    99+
    2024-04-02
  • 异步动态加载js与css文件的js代码
    jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下复制代码 代码如下:$.getscript("test.js"); 方法2: 代码如下复制代码 代码如下:fu...
    99+
    2022-11-15
    异步动态加载 js css
  • vue Keep-alive组件缓存的简单使用代码
    目录Props:用法:一、基本用法二、结合Router使用总结Props: include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达...
    99+
    2024-04-02
  • CSS网页布局中简单实用八个技巧分别是什么
    今天就跟大家聊聊有关CSS网页布局中简单实用八个技巧分别是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。和大家重点学习一下CSS网页布局非常有用...
    99+
    2024-04-02
  • 派发器抽离vue2单组件中的大量逻辑技巧
    目录概述本质具体实现总结概述 在vue2当中,我们写的逻辑都是options配置对象,比较固定的写法,方法,数据,都对应到各自的配置项当中,但是当一个组件的逻辑变得更加复杂,逻辑也越...
    99+
    2024-04-02
  • 关于vue-i18n在单文件js中的使用
    目录vue-i18n在单文件js中使用示例i18n如何在js文件中生效下面是我研究出的解决方法vue-i18n在单文件js中使用 示例 import Vue from 'vue' i...
    99+
    2024-04-02
  • JavaScript中最常用的代码简写技巧有哪些
    这篇文章给大家分享的是有关JavaScript中最常用的代码简写技巧有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、三元操作符当想写if…else语句时,使用三元操作符来...
    99+
    2024-04-02
  • VUE Mixins 技巧大揭秘:让组件复用与代码简洁触手可及
    1. 简介 Vue Mixins 是一种强大的工具,可以帮助您在 Vue.js 组件之间共享数据、方法和行为。通过使用 Mixins,您可以在不同组件中引用和复用相同的代码,从而提高代码的简洁性和可维护性。 2. 创建 Mixins 创建...
    99+
    2024-02-13
    Vue.js Mixins 组件重用 代码简洁性 可维护性
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作