Technology stack

Vue, NUxT, less

The development train of thought

It is divided into 5 parts, component extraction method, data interception data simulation with mock, later migration from Vue to NUxt, SSR server rendering, lazy loading of pictures, Flex layout, CSS style using less

innovation

The component data layer is separated from the logical layer. Although the logical processing is very simple in this project, it seems unnecessary, but considering the development of complex logic in the future, this idea is necessary to practice.

Specific recording function thinking:

1. Drop-down component:

The head drop-down bar component is pulled out, at the beginning of the hover did not think of directly using style control brother element style, directly using data driven control, not recommended, involving DOM operation, this type of direct use of style control next time, remember.

2. Caroute diagram component:

In the project, two similar rotographs appeared, but the small dots were in different positions. At first, they were made separately. Later, we considered adding variables and passing them to props for style control, so as to make a general rotograph. Vue is recommended: V-for = currentIndex === index v-show=”currentIndex === index” Other special effects can be improved by adding the transition. In the future similar to this reusable, as much as possible to make reusable.

3. Recommended product components:

Moving brick components, nothing to say, worth saying is the Hover picture after a streamer effect, mouse moved into the picture has a smooth flow.

Implementation idea:

You can use pseudo-elements or DIV, I (light) as streamers, with absolute positioning to the left.

.light { cursor: pointer; position: absolute; Left: - 510 px; top: 0px; height: 436px; background-image: -- moz -- linear gradient (0 deg, rgba (255255255, 0), rgba (255255255,0.5), rgba (255255255, 0)) background image: -- its -- linear gradient (0 deg, rgba (255255255, 0), rgba (255255255,0.5), rgba (255255255, 0)) transform: skewx(-25deg) -o-transform: skewx(-25deg) -moz-transform: skewx(-25deg) -webkit-transform: skewx(-25deg) }Copy the code

Image to add effect (REC) :

.rec:hover .light { left: 305px; Moz - the transition: 0.5 s; - o - the transition: 0.5 s; - its - the transition: 0.5 s; The transition: 0.5 s; }Copy the code
Linear-gradient Creates an image that represents a linear gradient of two or more colors -moz for Firefox - MS for Internet Explorer - WebKit for Chrome and Safari -o for Opera skewX() The function defines a transformation that tilts an element horizontally on a two-dimensional planeCopy the code

4. Product components

Product components are also a piece of brick development, with a few points to note:

There are two-dimensional code and no two-dimensional code, need to change the style

The style can be dynamically changed by data-driven, and boundary recognition requires a custom directive. The getBoundingClientRect API is recommended to get the size of the element and its position relative to the viewport. But consider compatibility issues. The development of this important note, hidden elements can not get the value of the attribute, so the compromise method can do some special treatment, first show it, then hide it back, this is also a pit point.

5. Lazy loading of images

Simple and easy to use Vue directly provided by the command VUE-lazyload, download can be used, but it is recommended to write a custom instruction, will harvest more, details to know the principle after knocking.

Main ideas:

The first is to bind scroll events for listening.

The second method is IntersectionObserver to judge whether the image is in the visible area.

However, IntersectionObserver API has compatibility problems, so both IntersectionObserver and IntersectionObserver can be combined. Firstly, whether IntersectionObserver is compatible with IntersectionObserver can be used, but scroll can be used if not. Scroll at this point can be optimized for anti-shake throttling.

6. Nuxt (SSR) migration

Nuxt.js gives me the impression that the changes in the directory are mainly main.js, as well as the absence of the router.

Nuxt is automatic routing, this is the nuxT framework unique, in order to achieve better SSR rendering, it uses the page structure, so the file name, is the route name.

Main.js was replaced by nuxt.config.js. In nuxt.config.js, change the source directory srcDir to ‘SRC /’.

If axios has been encapsulated in the VUE project, you can directly move all API JS written in the VUE to plugins, throw export default AXIos, and add it to plugins in nuxt.config.js according to the extended configuration. Or send the request using the asyncData provided by NUxT. After the migration, the normal start can be, the code is Vue code.

conclusion

1. The general idea is very important during development. First determine the general framework, and then how to build it, which technology stack to use, which components to use, how to pull out, and the general parameters to pass, etc., need to be conceived well. 2 use vUE to provide methods as far as possible do not use native, otherwise using vUE framework is meaningless. 3 V-for Index is not recommended as the key value. At the same time, components should not be extracted for the sake of extracting components. Some places do not need to be extracted. At the same time, the multicast timer is cleared when the life cycle is destroyed. 5 Encapsulation components can separate data and logic for easy operation. 6 Custom instructions can be unified in index management, throw into an object, and then unified registration. 7 naming conventions are very important. Whether it's component names or style names, it's recommended to use the same conventions. 8 comments will be very important, improve readability, give readers traversal, after all, different people have different styles, you do not note, others may not understand. 9 The less style under Scoped is recommended not to use the label name, the rendering is not good, I recommend class. 10 CSS style specification is also important, some azimuth margin, paddinig, width, height recommended in front, will increase the speed a little bit.Copy the code

If it is helpful to you, I hope I can get your thumbs up and recognition ~ thank you.