Vue.js high imitation hungry? Takeaway app front end Frame Vue.js 1.0 Upgrade 2.0

Source: Internet
Author: User

Course Catalogue:
The 1th chapter of the course Introduction
Introduce the learning objectives and learning content of the course.
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.
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.
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.
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.
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.
The 7th Chapter Project actual Combat-goods Product List page development
Write a goods commodity component, 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. ...
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.
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.
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.
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.
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.
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.

: http://www.itsource.com.cn/thread-288-1-2.html

Vue.js high imitation hungry? Takeaway app front end Frame Vue.js 1.0 Upgrade 2.0

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.