Article directory
Ask for three consecutive connections with one click
I hope you will like, follow and collect if you find it useful after reading this. Thank you! ! !
The most important thing here is the idea of component extraction
Preface
In real development, very little detailed knowledge is used, because those are the only things used in actual application scenarios.
If you make an error, first check if there are any spelling errors, and then check your logic.
Early configuration
assets (materials)
assets represent js, css, templates, pictures, flash and other resource files, which means resources. They generally store static resources written by yourself during the development process.
reset.css is the reset css (must be imported into main.js after writing)
Extract components
1. Complete the page first
There was no idea of extraction at the beginning, so we followed the writing method of a vue file, implemented this page first, and then extracted it.
First build the HTML framework, which is divided into header, list, and list is implemented using v-for loop. First, roughly implement the entire page. There is no need to debug the style, and finally adjust it.
Template is used for traversal and v-if judgment , and the key is looped. The binding is usually id. Because it is the only one that cannot
write a list at once, I just write a small one first, and then see if I can see the list and data. Go ahead and write what’s inside
The most important thing is to write the entire framework first, then make sure there is no problem with the logical structure, and then slowly work on the things inside.
2. Start extracting
Extraction idea: The entire component can be extracted into a module, because this component is just a part of the web page.
RoomArea: AreaHeader+AreaItem
implements v-for loop in RoomArea, and item is a small module
component tree .
3.Details adjustment
The same return logic can be put together and return an object, which is more convenient to operate and more convenient to view the code. Therefore,
these are more commonly written using computed functions. Remember the syntax
so that they can be set according to the data in the server. style
The most common thing in development is to extract components and then encapsulate them for use.
Simulate network requests
Style css adjustment
Style alignment:
margin: 0px -8px If there is no alignment, add - and it will be OK.
The width is very interesting, both are 33.333%, so the three are exactly the same. If they are aligned, there is
an inner-item nested inside the item, and a margin is added. , so that there is space between the final content (negative values extend the width)
less (CSS preprocessing language)
I haven’t learned this before. I read an article on the Nuggets
to learn about Less - reading this article is enough.
To use less in the vue CLI project, you need to npm install less-loader -D
and spend time learning less.
The real time spent may be on CSS debugging. You also need to spend time learning CSS. My mastery is not good enough. Review it!