Vue.js high imitation hungry? Takeaway app

The 1th chapter of the course Introduction
Introduce the learning objectives and learning content of the course.
1-1 Course Brief
1-2 Course Schedule

2nd Chapter Vuejs Introduction
Starting with the development trend analysis of the front end, introducing the MVVM development Framework and Vue.js, then comparing the popular frameworks angular and React, and finally detailing the core ideas of vue.js-data-driven and component-based.
2-1 Vuejs Introduction-Front-end development trends in recent years
2-2 Vuejs Introduction-MVVM Framework
2-3 Vuejs Introduction-What is Vuejs and Vuejs ecology
2-4 Vuejs Introduction-contrast angular, React
2-5 Vuejs introduces-vuejs core idea

3rd Chapter VUE-CLI Open Vuejs Project
This paper introduces the scaffolding of Vue project, how to install it, introduces the catalogue file of scaffolding, introduces the method of writing Vue component, and finally runs the demo project and introduces the Webpack construction script to illustrate the operation Principle of demo.
3-1 VUE-CLI Introduction
3-2 VUE-CLI Installation
3-3 Project Run
3-4 Introduction to project documents
3-5 Webpack Pack (top)
3-6 Webpack Packing (Medium)
3-7 webpack Pack (bottom)

The 4th chapter of the project-preparatory work
Analyze the needs of the takeaway APP merchant page, prepare the image resources, use Icon-moon to make SVG icon font, the directory structure design of the code, and finally mock the test data.
4-1 Demand Analysis
4-2 Project Resource Preparation
4-3 Icon Font Making
4-4 Project Catalog Design
4-5 mock data (simulating background data)

The 5th Chapter Project actual combat-page skeleton development
The skeleton of the design page, the split component, the product, comment, and merchant details page use Vue-router to switch, and finally introduce the flex layout and tips for moving the 1-pixel border implementation.
5-1 component Split (top)
5-2 component Split (medium)
5-3 component Splitting (bottom)
5-4 Vue-router (Upper)
5-5 Vue-router (Lower)
5-6 1 megapixel border implementation

The 6th Chapter Project actual Combat-header component development
Write header headers, apply Vue-resource to read data from the server, describe how to use transition animations in vue.js, how to write CSS sticky footer layouts, and how to abstract star star components from the requirements.
6-1 vue-resource Application (top)
6-2 vue-resource Application (bottom)
6-3 external components (1)
6-4 External Components (2)
6-5 External Components (3)
6-6 external Components (4)
6-7 External components (5)
6-8 External components (6)
6-9 Details Bounce page (1)-Implement popup layer
6-10 Details Bounce Page (2)-CSS Sticky Footer
6-11 Details Bounce Page (3)-Star component Abstraction (top)
6-12 Details Bounce Page (3)-Star Component abstraction (bottom)
6-13 Details Bounce Page (4)-Star component use
6-14 Details Bounce Page (5)-Small title Adaptive Classic Flex Layout implementation
6-15 Details Bounce Page (6)-Header remainder component implementation (top)
6-16 Details Bounce Page (6)-Header remainder component implementation (bottom)

7th Project actual combat-goods Product List page Development
Write goods commodity components, including its subcomponents Shopcart shopping cart. This paper introduces how to apply third-party JS plug-in Better-scroll to implement the list scrolling, and to cooperate with Vue.js's calculation property to realize the linkage of left and right list vue.js. A custom Vue.js transition animation is applied to realize the fly-in animation effect of the shopping cart, and describes how the parent-child component communicates in the Vue.js. ...
7-1 Layout
7-2 left menu layout
7-3 right food list layout (1)
7-4 right food list layout (2)
7-5 right food list layout (3)
7-6 better-scroll Application (1)
7-7 better-scroll Application (2)
7-8 better-scroll Application (3)
7-9 Shopcart Shopping Cart components (1)
7-10 Shopcart Shopping Cart components (2)
7-11 Shopcart Shopping Cart Components (3)
7-12 Shopcart Shopping Cart components (4)
7-13 Shopcart Shopping Cart components (5)
7-14 Shopcart Shopping Cart components (6)
7-15 Cartcontrol components (1)
7-16 Cartcontrol components (2)
7-17 Cartcontrol components (3)
7-18 Shopping cart Ball Animation implementation (1)
7-19 shopping Cart Ball animation (2)
7-20 Shopping Cart Ball Animation implementation (3)
7-21 Shopping Cart Details page implementation (1)
7-22 Shopping Cart Details page implementation (2)
7-23 Shopping Cart Details page implementation (3)
7-24 Shopping Cart Details page implementation (4)

8th Chapter Project actual Combat-food Product detail Page implementation
Write the Food Commodity Details page component, introduce the skill of image placeholder, and abstract the split component from the requirements and Ratingselect Comment component, implement the custom filter datefilter.
8-1 Product Details page implementation (1)
8-2 Product Details page implementation (2)
8-3 Product Details page implementation (3)
8-4 Product Details page implementation (4)
8-5 Product Details page implementation (5)
8-6 Split Component implementation
8-7 Ratingselect Components (1)
8-8 Ratingselect Components (2)
8-9 Ratingselect Components (3)
8-10 Ratingselect Components (4)
8-11 Ratingselect Components (5)
8-12 Reviews List (1)
8-13 Reviews List (2)
8-14 Reviews List (3)
8-15 Reviews List (4)
8-16 Reviews List (5)
8-17 Reviews List (6)

The 9th chapter of the project actual Combat-ratings Evaluation List page implementation
Write the Ratings evaluation List page and feel the benefits of reusing components in vue.js for rapid development.
9-1 ratings Component Development-overview Development (1)
9-2 ratings Component Development-overview Development (2)
9-3 ratings Component Development-overview Development (3)
9-4 ratings Component Development-evaluation List (1)
9-5 ratings Component Development-evaluation List (2)
9-6 ratings Component Development-evaluation List (3)

10th Chapter Project Actual Combat-seller Merchant Details page implementation
Write the Seller Merchant Details page to achieve a common set of mobile data access scenarios and to optimize the experience of the project.
10-1 Seller Component Development-overview Development (1)
10-2 Seller Component Development-overview Development (2)
10-3 Seller Component Development-announcements and events development (1)
10-4 Seller Component Development-announcements and events development (2)
10-5 Seller Component Development-bscroll application
10-6 Seller Component Development-business reality map
10-7 Seller Component Development-Business information
10-8 Seller Component Development-collection Merchants (1)
10-9 Seller Component Development-collection Merchants (2)
10-10 Seller Component Development-favorite merchant
10-11 Seller Component Development-Experience optimization

The 11th chapter of the Project-project compilation Package
The final step before you go online, compile and package the Vue.js project. Describes the Webpack compile-time configuration and how to use node. js to open a server-local debug.
11-1 Webpack Configuration Introduction
11-2 Nodejs Commissioning

The 12th chapter of the course summary
Summarize the course and include links to the main points of knowledge mentioned in the course as an extension of the course.
12-1 Course Summary

13th 2.0 upgrade of the project from vue.js1.0 to
This section provides a brief introduction to upgrading the project from 1.0 to 2.0.
13-1 1.0 Upgrade 2.0 configuration file modification
13-2 1.0 Upgrade 2.0 source modification (top)
13-3 1.0 Upgrade 2.0 source modification (bottom)

: Baidu Network Disk download

Vue.js high imitation hungry? Takeaway app