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
.vue
File inside, a large amount of code, thousands of lines, uncomfortable, cut it (simple pages can be ignored) - 3, based on
vue2 cli3
project
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