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

目录
  • 场景
  • 方法
    • index.vue 基础代码
    • index.scss 基础代码
    • index.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代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

    目录 场景 方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码 拓展 代码 总结 场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目 方法 挺简单的,就是利用下ES6的import和export 例如mockData

  • 详解vue文件中使用echarts.js的两种方式

    最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式 准备工作 1.安装echarts依赖 控制台输入:npm install echarts --save 2.全局引入 main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

  • Vue项目中CSS Modules和Scoped CSS的介绍与区别

    目录 背景 CSS Modules 原理 规则 :global选择器 Vue3新特性 Scoped CSS 原理 规则 深度作用选择器 Vue3新特性 二者的比较 总结 背景 在前端工程化飞速发展的时候,作为非编程语言的CSS在融入模块化的浪潮时产生了很多问题: 无法做到样式模块化 组件化开发是前端模块化的核心,但是原生CSS的思想是样式的层叠,对于组件来说并不友好,会造成组件样式被覆盖等问题. 于是我们希望样式是存在作用域的,即在组件的作用域内,组件样式只对该组件生效. 命名混乱 在大型项目中

  • vue项目中main.js使用方法详解

    目录 第一部分:main.js文件解析 第二部分:Vue.use的作用以及什么时候使用 Vue.use是什么?(官方文档) Vue.use()什么时候使用? 补充:关于main.js方便小技巧 总结 第一部分:main.js文件解析 src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础配置 import Vue from 'vue' import App from './App.vue' /

  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 解决方法如下: 1.打开插件的配置文件夹,即 c盘 -> 用户 -> 用户名 -> .vscode文件夹 2.extensions目录 -> bttter-comments配置文件夹 3.打开配置文件aaron-bond.better-comments-3.0.2 -> out -> parser.js 4.修改配置文件,添加如下代码 case &qu

  • vue项目中mock.js的使用及基本用法

    官方网址:http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据. 使用方式 这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程. vue-cli搭建项目后,安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹,来设

  • 详解.vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由来 项目中使用了elementUI框架, 与.vue文件. 现状: <template>中使用$style:[类名], <style module>进行了样式的绑定. 个人认为使用$style这种方式的绑定, 写起来很麻烦. 不仅仅是麻烦更重要的是, 没有办法直接影响和修改elemen

  • 关于vue文件中index.vue的使用方法

    目录 vue文件中index.vue使用 vue的index.html总结 为啥要有index.html 单页面应用 index.html实战代码汇总 vue文件中index.vue使用 <template> <div> <keep-alive> //组件缓存 <home-page v-if="pageName === 'homePage'"></home-page> </keep-alive> <add-p

  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下: scoped可以实现style只作用于当前的.vue文件 <template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style> 上面的文

随机推荐