Vue practical business level reading Web APP to improve skills comprehensively
Ultra clear original painting complete in MP4 format
Download address: Baidu Cloud disk
Using the latest technology of Vue to develop a commercial Web reading application with complete functions comparable to the original App. In the development, various knowledge points are interspersedand applied, so that you can truly feel the whole process of the development of a star product. The project has a more in-depth study of the reader, and detailed teaching of various complex functions from principle to implementation. At the same time, the project provides first-class user experience and interaction level, in addition to the implementation of functions to take you to explore a variety of excellent front-end interaction design and implementation
支那
Suits the crowd
支那
Suitable for some front-end development experience, but lack of vue.js actual combat experience on the overall development process
I am not familiar with dachang interactive design and tools. I want to further improve my experience in project development
Student of train of thought
支那
Technical reserve requirements
支那
The free course “Quick Start Web Reader Development” is recommended.
Understand the basic syntax of vue.js and develop simple projects
Basic knowledge of HTML/CSS/JS, CSS box model and Flex layout
Understand Scss/Sass and ES6 syntax
Experience with NPM +Webpack, experience with Vue CLI build projects
Chapter Contents:
支那
Chapter 1 Course Introduction
Introduce reader project background, function structure, technology stack and function demonstration, quickly understand the whole course arrangement and content.
1-1 Learning and trial
1-2 Course study Guide
Chapter 2 project requirements and reader engine introduction
This paper introduces the project requirements and the development principle of the reader, and sets up the Development environment of Node.js and VUE-CLI 3.0.
2-1 Project requirement analysis
2-2 Principle of the reader
2-3 ePub standards
2-4 Introduction to epubJS reader engine
2-5 Installing the Node.js environment
2-6 VuE-CLI 3.0 Construction Method (Prototype Development)
2-7 VUE-CLI 3.0 Construction Method (Scaffolding Creation project)
2-8 Analysis of technical difficulties of the project
Chapter 3 Project Preparation
Complete the preparatory work before project development, explain how to introduce font icon, Web font, REM, style reset table, detail the basic principle of Vuex and the implementation principle of mapGetters, and build a static resource server based on Nginx.
3-1 Preparation work description
3-2 Prepare font ICONS
3-3 Downloading project dependency packages
3-4 Prepare the Web font
3-5 Viewport configuration and REM Settings
3-6 Global. SCSS and reset. SCSS Settings
3-7 Vuex + vue-devTools
3-8 Setting up a Static resource Server
Chapter 4 reader – title menu, font size and theme setting function development
Explains how to implement reader parsing and rendering, gesture page-turning operations, decoupling of title bar and menu bar components, and implement font size Settings and reader global theme Settings.
4-1 Demand analysis of reader
4-2 Reader parsing and rendering
4-3 Realization of page turning function of reader
4-4 Title bar and menu bar implementation
4-5 size setting UI implementation
4-6 size setting function is realized
4-7 Realization of font setting function
4-8 font Settings popup UI implementation
4-9 Font setting popup function is realized
4-10 Size and font Settings for offline storage
4-11 Font Settings Internationalization of the title
4-12 Realization of reader theme setting function
4-13 Realization of global theme setting function
Chapter 5 reader — development of reading progress, table of contents and full-text search functions
Explains how to realize the reader reading progress, reading time statistics, chapter switch, multi-level directory display, full-text search and directory loading animation.
5-1 Realization of reading progress function (Progress panel + paging logic)
5-2 Realization of reading progress function (Progress dragging function)
5-3 Realization of reading progress Function (Switching function of the next and next chapters)
5-4 Realization of reading progress function (Chapter switching and progress synchronization)
5-5 Realization of reading progress function (save reading progress function)
5-6 Implementation of directory Functions (Directories appear)
5-7 Realization of directory functions (Tab option switching and search effect)
5-8 Realization of directory Functions (Book Content layout)
5-9 Realization of directory function (Book content style)
5-10 Realization of directory Function (Development of directory data structure)
5-11 Directory Function (Multi-level Directory function)
Realization of full-text search function (Search algorithm + array dimension reduction)
5-13 Full text search function (search keyword highlighting + search results highlighting)
5-14 Directory loading animation implementation (principle analysis + layout implementation)
5-15 Directory loading animation implementation (animation effect implementation)
Chapter 6 readers – Bookmark functionality, header footer and compatibility optimization
Explains how to realize the gesture operation of the reader, introduces the realization idea and principle of complex gesture interaction in detail, adds the header and footer to the reader, and optimizes the compatibility between the mobile end and PC end, so that the reader can better support the use of the PC end and the mobile end.
6-1 Bookmark gesture implementation (page drop-down)
6-2 Bookmark Gesture implementation (Bookmark component)
6-3 Bookmark gesture implementation (drop-down state management)
6-4 Bookmark gesture implementation (Bookmark add and delete interaction)
6-5 EpubCFI principle introduction
6-6 Bookmark function realization
6-7 header and footer function realization
6-8 Introduction to reading patterns
6-9 adjustment of wechat compatibility
Adaptive Layout optimization (PC layout optimization)
6-11 Adaptive layout optimization (Bookmarks support mouse events)
6-12 Reader page algorithm implementation
6-13 Summary of reader related knowledge points
Chapter 7 Development of home page, search page, list page and detail page
Explains the development process of the homepage, search page, list page and detail page, introduces the implementation principle of interactive animation of recommendation animation, title bar and search box on the homepage in detail, and introduces Mock. Js to realize API data simulation.
7-1 Demand analysis of book City development
7-2 Book Store homepage development (frame page + routing configuration)
7-3 Book City Home Page (Title + Search box layout)
7-4 Book Market Home Page (Title + Search box interaction design analysis)
7-5 Book City home page (title interactive animation) try
7-6 Book City Home Page (Interactive animation of search box)
7-7 Book Market Home Page (Popular Search layout)
7-8 Book City Home Page (Popular Search interaction)
7-9 Book City Home Page (Recommended page layout)
7-10 Book City Home Page (Card flip animation)
7-11 Book City Home Page (card flip animation reset)
7-12 Book City Home page (card appearance keyframes animation explanation)
7-13 Book City Home Page (fireworks animation implementation)
7-14 Home page (MockJS Usage Explanation)
7-15 Book City Home Page (Recommended book layout + animation)
Book City Home Page (Realization of book layout on home page)
7-17 Book City details page development
7-18 Book city list page development
7-19 Chapter 7 Summary
Chapter 8 bookshelf page development
Explain the development process of bookshelf page, including: bookshelf data structure design, nine-grid layout, private reading function, offline storage function, grouping function, move out of the bookshelf function and animation.
8-1 Shelf title component layout implementation
8-2 Interactive realization of bookshelf title components
8-3 Shelf search box layout implementation
8-4 Interactive Implementation of Bookshelf Search box (I)
8-5 Interactive implementation of bookshelf Search box (Part 2)
8-6 Bookshelf data structure design + data acquisition
Bookshelf title + Search box Style optimization (Fixed title + scroll Shadow)
8-8 Bookshelf book list realization (component design + dynamic component application)
8-9 Bookshelf book list layout
8-10 Shelf book component development (realization of single book cover + classified book cover)
8-11 Shelf book component development (add + edit implementation)
8-12 Bookshelf editing mode development
8-13 Shelf pop-up box component development
Function development of pop-up box of bookshelf (1)
8-15 Function development of pop-up box of bookshelf (2)
Development of offline Cache function for E-books (1)
Development of offline Cache function for E-books (2)
8-18 Development of e-book cache deletion function
8-19 Development of bookshelf cache + offline reading function
8-20 Development of bookshelf grouping function
8-21 Shelf list transition animation development
8-22 Development of bookshelf classification list
8-23 Optimization of bookshelf grouping function
Bookshelf modification grouping function development (1)
Bookshelf modification grouping Function development (2)
Chapter 9 listening page development
Explain the development process of the listening page, and explain in detail the docking method of IFLYTEK online speech synthesis API, the layout realization of the player panel, and the realization principle and method of the player.
9-1 Introduction to the listening function
9-2 Listening component integration
9-3 Listening component source code analysis
9-4 Source analysis of listening player
9-5 Source code analysis of player panel
9-6 Summary of listening function development points
Chapter 10 Project Release
Node.js is used to develop simple API, and the project is released through THE ESC of Ali Cloud. Nginx service is built on the CentOS operating system, the code is uploaded to Git, and the automatic update script is written to realize the automatic update and release of the code.
10-1 Vue project construction
10-2 Function optimization + construction problem handling
10-3 Preparing a database environment
10-4 Node.js+ Express writing API
10-5 API Development of Book Market Home Page (1)
10-6 API Development of Book Mall Home Page (2)
10-7 API joint adjustment of front and back end of the home page of book Mall (to solve cross-domain CORS)
10-8 Ebook details API development
10-9 Ebook list API development
10-10 IFlytek Online Speech Synthesis API Docking (I)
10-11 IFlytek Online Speech Synthesis API docking (Ii)
10-12 Backend API source upload Git demo
10-13 Alicloud ECS server opened
10-14 Setting up a CentOS node. js environment
10-15 Setting up a CentOS Ngnix environment
10-16 CentOS Git Deployment + Secret-free Update
10-17 CentOS front-end project construction and release
10-18 CentOS MySQL Environment Installation
10-19 Developing a CentOS one-click deployment script
10-20 Aliyun domain name registration, resolution and filing process
Chapter 11 Course Summary
Review and summarize the knowledge points in the course.
11-1 Course Summary
Chapter 12 “MPVUE Small program Framework Practical” course experience
“Mpvue2.0 framework practical small admire reading multi-platform small program” is the latest launched by The teacher Sam0519 multi-end small program practical course. In order to reward the students who bought the course “Vue2.5 Actual Wechat Reading”, we now open part of the new course as an experience. (the new curriculum will be on July 29 [Monday], course links coding.imooc.com/class/376.h…). .
12-1 [Course Quick Preview] Peep into the complete flow of a small program project
12-2 [Course Quick Preview] Project technology selection and technology stack introduction
12-3 [Introduction to the MPVue Framework] What is the MPVue framework
12-4 [Getting started with the MPVue Framework] Initialize the MPVue project through scaffolding
12-5 [Introduction to mpVUE Framework] PRINCIPLES and life cycle of MPVue
12-6 [Project Planning and Design] Project effect demonstration
12-7 [Project Planning and Design] Project requirement analysis
12-8 [Project Planning and Design] Interactive visual analysis of the project
12-9 [Project Planning and Design] Visual cutout
12-10 [Project Planning and Design] Project development plan
This course is over
支那