scenario

  • 1. As AN MVC habit formed in iOS development at the early stage, I like CSS and JS codes to be placed in a file independently, which is to separate style modules and business processing modules
  • 2, write complex interface, complex business, interface, style, business code are put.vueFile inside, a large amount of code, thousands of lines, uncomfortable, cut it (simple pages can be ignored)
  • 3, based onvue2 cli3project

methods

Quite simple, just use ES6 import and export

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

|-- src
    |-- views
        |-- mockDataTest
            |-- index.vue
            |-- index.scss
            |-- index.js

Copy the code

Vue base code

<! Class ="mockDataTestView"> mockDataTestView </div> </template> <! <script> import indexjs from './index.js' export default {... indexjs, } </script> <! <style lang=" SCSS "scoped> @import './index.scss'; </style>Copy the code

Index. SCSS base code

.mockDataTestView {
    padding: 10px;
}
Copy the code

Index.js base code

export default { name: 'mockDataTestView', data() { return { } }, mounted() { }, created() {}, methods: { }, watch: {}}Copy the code

Pure in order to make a file inside the code as little as possible, easy to read, edit

expand

This works for vue2, JS, and SCSS, as well as vue3 and typescript

code

There’s nothing to see. That’s enough up there.

See mockDataTest in views