1. Complete the three-level linkage component (global component)
Since the three-level linkage component needs to be used in Home, Search, and Detail, the three-level linkage component is used as a global component, so that it only needs to be registered once and can be used anywhere in the project.
Create a new "home/TypeNav/index.vue", write the structure and style, and name the component
Open main.js and register the three-level linkage component as a global component
Next, you can use the three-level linkage component in the home module
First open "Home/index.vue"
Since it has been registered as a global component, it does not need to be introduced, directly write to <TypeNav></TypeNav>
At this point, re-run npm run serve to see the three-level linkage components
2. Home page split static components (partial components)
2.1 Create a new ListContainer component
Create a new "Home/ListContainer/index.vue"
write structure and style
Add the image resources used to images
Next, the ListContainer component needs to be introduced into the Home component. Since the ListContainer component is not a global component, it needs to be introduced, registered and used. Open "Home/index.vue" and add the following code:
2.2 Create a new Recommend component
Create a new "Home/ListContainer/index.vue"
write structure and style
Add image resource
Open "Home/index.vue" and add the following code:
Rank, Brand, Floor, Like, and TypeNav components are omitted here because the steps are exactly the same as above.