foreword
-
When we write html, css, and js on a vue page, we will find that the code is a lot of headaches, but in fact, the css code can also be extracted.
-
We can create a new style file under the src/assets file, put the style file here, and import it into the vue file
-
After extracting the code in this way, no matter when running the code locally or testing online, there is no problem, because the packaging has already been entered.
Implementation steps - take dashboard.vue as an example
The new folder is in the src/assets/style/dashboard/dashboard.scss file
Copy the homepage style
Introduce the style file on the homepage
<style lang="scss" scoped>
@import '~@/assets/style/dashboard/dashboard.scss';
</style>
detail
1. When the style file is put into the style file, it is better to create another module folder (that is, one more directory) so that the structure is clear at a glance.
2. When importing .vue files, it is best to use ~@/, otherwise the style may not come out.
Summarize:
After this process, I believe that you have also had a preliminary deep impression on the extraction of css style codes on the vue-pc side, but the situation we encounter in actual development must be different, so we must understand its principle, in case Inseparable from the original. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen