Simple tips for separating css and js codes in vue files

Scene

• 1. Because it was developed in iOS in the early days, I personally like to put the css and js codes in a file independently, that is, separate the style module and the business processing module.
• 2. When writing complex interfaces and complex businesses, the interfaces, styles, and business codes are placed in the vue file. The code volume is very large, thousands or tens of thousands of lines, which is uncomfortable, so cut it (simple pages can be ignored)
• 3. Based on vue2 cli3 project

method

It's quite simple, it's just to use the import and export of ES6

For example, create a new mockDataTest directory in the views directory, and create a new ** (interface main file), (interface style code), and (business js code) in the directory. The structure is as follows:

|-- src
    |-- views
        |-- mockDataTest
            |-- 
            |-- 
            |-- 

Basic code

<!--Interface code-->
<template>
  <div class="mockDataTestView">
    mockDataTestView
  </div>
</template>

<!--A separate business is introduced herejsCode-->
<script>
import indexjs from './'
export default {
  ...indexjs,
}
</script>

<!--这里引入分离的界面样式Code-->
<style lang="scss" scoped>
@import './';
</style>

Basic code

.mockDataTestView {
    padding: 10px;
}

Basic code

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

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

It is purely to make the code in a file as small as possible, so that it can be read and edited

expand

The above is for vue2, js, scss, vue3 and typescript are also OK.

Code

There is nothing good to look at, there is enough on it.

Code, refer to the mockDataTest in views

Summarize

This is the article about the simple techniques of separating css and js codes in vue files. For more related css js code content in vue files, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!