How to separate css and js codes in vue files
Today, Xiaobian will share with you how to separate the relevant knowledge points of css and js code in vue files. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.
Scene
1. Because of the MVC habit formed by iOS development in the early days, I like css and js code to be put in a separate file, that is, to separate the style module from the business processing module
2. When writing complex interfaces and complex businesses, the interface, style and business code are all put in the .vue file, with a large amount of code, tens of thousands of lines, uncomfortable, cut it (simple pages can be ignored)
3. Based on vue2 cli3 project
Method
It's quite simple, just use ES6's import and export.
For example, in the mockDataTest.vue file, create a new mockDataTest directory under the views directory, and create * * index.vue (interface master file), index.scss (interface style code) and index.js (business js code) in the directory. The structure is as follows:
| |-- src |-- views |-- mockDataTest |-- index.vue |-- index.scss |-- index.jsindex.vue base code mockDataTestView import indexjs from'. / index.js'export default {... indexjs,} @ import'. / index.scss';index.scss base code .mockDataTestView {padding: 10px | } index.js basic code export default {name: 'mockDataTestView', data () {return {}}, mounted () {}, created () {}, methods: {}, watch: {}} these are all the contents of the article "how to separate css and js codes in vue files". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
