Vue3.0 (official version) + TS imitates the column enterprise-level project

Vue3.0 (official version) + TS imitates the column enterprise-level project


Vue3.0 enterprise-level project combat. Combining popular technologies with two swords, Vue3.0 cooperates with TypeScript, and uses the new version of Vuex and Vue-Router to complete the front-end separation complex actual combat project. A series of general component development from easy to difficult, let you learn a basic component library development ideas and skills. Access the real back-end API, bid farewell to mock data, and provide Swagger online debugging and query. Grasp the front-end and back-end separation development pain points-permission management, routing control, global store structure design, front-end cache implementation, etc.


For the crowd
1-- front-end developer 3 years experience of
entering the community of graduates in
technical reserve requirements
HTML / CSS / JS basic
basics JavaScript
basics Vue2


Chapter 1 Course Introduction
This chapter introduces the content of the whole course, so that everyone understands the core and arrangement of the course.

1-1 Course introduction (guide) Take a look at
1-2 Precautions for using code libraries and online documents (must see)
Chapter 2 Hello Typescript: Enter the world of types
This chapter mainly helps you understand the problems that TypeScript can solve and what it brings The advantages of, lead you to learn the various basic types in TS, and then advance to complex types, including: Array, Tuple, interface, function, Class, Enum, Generices, etc., to quickly help you understand the basic usage and syntax of TS.

2-1 What is Typescript
2-2 Why should I learn typescript
2-3 Install typescript
2-4 Primitive data types and Any types
2-5 Arrays and tuples
2-6 Interface- Introduction
2-7 Functions
2-8 Type inference Associated types and type assertions
2-9 class-the first class meets
2-10 classes and interfaces-the perfect partner
2-11 Enum
2-12 Generics Part 1
2-13 Generics 2 Part-Constraint Generics
2-14 Generics Part III-Use of Generics in Classes and Interfaces
2-15 Type Aliases, Literals and Interleaved Types
2-16 Declaration Documents
2-17 Built-in Types
Chapter 3 Getting to Know Vue3 .0: Detailed description of new features
First, browse the new changes brought by vue3, and then introduce the topic of why there is vue3, and lead you to learn about the compilation API, custom Hooks, Teleport, Suspense, and global API modification. A series of major updates of vue3.

3-1 Tour of the new features of vue3
3-2 Why is there vue3
3-3 Use vue-cli to configure the vue3 development environment
3-4 Project file structure analysis and recommended plug-in installation
3-5 Vue3-The magical use of ref
3-6 More recent One step-reactive
3-7 vue3 new tricks of responsive objects
3-8 old bottles of new wine-life cycle
3-9 detect changes-watch
3-10 vue3 modular magic-mouse tracker
3-11 modular difficulty rise-useURLLoader
3-12 Modularization combined with typescript-Generic transformation
3-13 Typescript's blessing of vue3
3-14 Teleport-Teleportation part 1
3-15 Teleport-Teleportation part 2
3-16 Suspense-Asynchronous request helper Part
1 3 -17 Suspense-A Good Helper for Asynchronous Requests Part 2
3-18 Global API Modifications
Chapter 4 Project Set Sail-Preparations and the first page
This chapter starts from the analysis of the project requirements, and then determines the overall structure and code specifications of the project, and The project chose Bootstrap as the style library. After completing simple hands-on practice by writing ColumnList and GlobalHeader, I began to challenge the first more complex Dropdown menu component, and finally abstracted the first hooks function. ...

4-1 Project sailing requirement analysis
4-2 File structure and code specification
4-3 Introduction and analysis of style solutions
4-4 Design drawing splitting and component attribute analysis
4-5 ColumnList component coding
4-6 ColumnList component beautification with Bootstrap
4 -7 GlobalHeader component coding
4-8 Dropdown component basic function coding
4-9 Dropdown component adding DropdownItem
4-10 Dropdown component clicks on the outer area to automatically hide
4-11 useClickOutside The first custom function
Chapter 5 The world of the form-complete the customization Form Component
This chapter comes to the world of forms. From beginning to end, we have completed a complete development process of form components with validation. In the whole process, we also learned v-model, $attrs, slot, component parent-child communication and Various knowledge points of mitt.

5-1 The classic elements of the web world-Forms
5-2 ValidateInput Part 1-A simple implementation example
5-3 ValidateInput Part 2-Abstract validation rules
5-4 ValidateInput Part 3-Support v-model
5-5 ValidateInput coding part Four parts-use $attrs to support default attributes
5-6 ValidateForm component requirements analysis
5-7 ValidateForm coding part one-use slot
5-8 ValidateForm coding part two-try parent-child communication
5-9 ValidateForm coding part three-find Foreign aid mitt
5-10 ValidateForm coding part 4- you're done
Chapter 6 Please eat the family bucket-initial use of vue-router and vuex
This chapter is derived from the concept of SPA, completed the installation of vue-router, and then learn its basic use, Various knowledge points such as information acquisition, dynamic jump, front guard and meta information, and then the specific definition of state management tools are introduced, which leads to the installation of vuex and its state, mutation, getter and other basic knowledge points. ...

6-1 What is SPA (Single Page Application) application?
6-2 vue-router installation and use
6-3 vue-router configure routing
6-4 vue-router add route
6-5 add columnDetail page
6-6 what is the state management tool
6-7 Vuex introduction and installation
6-8 Vuex Integrate the current application
6-9 Use Vuex getters
6-10 Add new article page
6-11 Vue router Add router guard-Front guard
6-12 Vue router Add router guard-Use meta-information to complete authority management
Chapter 7 Front-end integration- Project integration back-end interface
This chapter starts with the separation of front-end and back-end and RESTful concepts, introduces how to use the swagger debugging tool provided for students, and then introduces axios, through the addition of vuex action, realizes the basic usage of async transformation and axios interceptor, and finally Abstract the coding and implementation process of a Loader component.

7-1 What is the separation of front-end and back-end development?
7-2 RESTful API design concept
7-3 Use swagger online documentation to view interface details
7-4 Basic usage of axios and exclusive back-end API usage (must see)
7-5 Use vuex action to send Asynchronous request
7-6 Use vuex action to send asynchronous request Part 2
7-7 Use async and await to transform asynchronous request
7-8 Use axios interceptor to add loading effect
7-9 Loader component coding Part I-Basic implementation of
7-10 Loader component The second part of the coding-use Teleport to transform
Chapter 8 Passage Credentials-Permission Management
This chapter starts from obtaining the token, tells the principle and implementation of the JWT universal authentication tool, and then completes the axios setting general header and persistent login processing method , And then added global general error handling, and finally abstracted the coding and implementation process of a general component Message.

8-1 Log in to the first part to obtain token
8-2 The operating mechanism of jwt
8-3 Log in to the second part of axios to set the common header
8-4 Log in to the third part of persistent login status
8-5 General error handling
8-6 Create Message component
8 -7 Message component is improved to a function call form
8-8 Assignment: Preparation of
the registration page Chapter 9-Uploading component
This chapter implements the whole process of the Upload component from analysis and coding. In this process, we will learn To: The principle of uploading files, using axios to complete the method of uploading files, and gradually completing the development process of a complex component.

Chapter 10 Final Function-Editing and Deleting Articles.
By completing the editing and deleting functions of the article, several bugs left by the previous components were brought out. By solving the bugs, it brought you ideas and solutions for continuous optimization, and finally completed a general Modal The coding process of the component.

Chapter 11 Continuous Optimization
Through analysis, we found two parts that can be optimized in the application, and proposed and coded the store optimization scheme for changing the array to the object and the solution to prevent repeated requests. Finally, in addition to the logic implementation of useLoadMore, a complex custom Hooks was finally completed.

The 12th chapter project construction and deployment
starts from the concept of production environment and the similarities and differences between production environment and development environment, and then practices a series of concepts of application construction, construction code going online, and construction code continuous integration.

Chapter 13 Course Summary
This chapter leads you to review the content of the course.

This course is continuously updated

Guess you like

Origin blog.51cto.com/14926695/2539823