Vue3.0 (official version) + TS Copy Zhihu column enterprise-level project
Ultra clear original painting complete in MP4 format
Download address:Baidu cloud disk
The first Vue3.0 enterprise project combat. Vue3.0 works with TypeScript to complete complex combat projects with Vuex and VUE-Router. A series of easy to difficult general component development, let you learn a basic component library development ideas and skills. Access real back-end apis, say goodbye to mock data, and provide Swagger debugging queries online. Grasp the pain points of the development of front and back end separation – permission management, routing control, global Store structure design, front-end cache implementation, etc.
** Suitable for the crowd ** **1-3 years of development experience of front-end developers ** ** graduates entering the society **
HTML/CSS/JS Basic knowledge of JavaScript basic knowledge of Vue2
** Chapter contents: **
** Chapter 1 Course Introduction **
** This chapter introduces the content of the whole course, so that you can understand the core and arrangement of the course. **
**1-1 Course Introduction (Guide) Try **
**1-2 Code base and online documentation usage considerations (must-see) **
** Chapter 2 Hello Typescript: Into the World of Types **
** This chapter will help you understand the problems TypeScript solves and the benefits it brings. It will take you through the basic types in TS and then on to the complex types: Array, Tuple, interface, function, Class, Enum, Generices, etc., quickly help you understand the basic usage of TS and syntax. **
**2-1 What is Typescript**
**2-2 Why learn typescript**
2-3 installation typescript * * * *
**2-4 Raw data types and Any types **
Arrays and tuples **
**2-6 Interface- Interface
* * * * 2-7 function
**2-8 Type inference combines types and type assertions **
**2-9 Class – Class First meeting **
**2-10 classes and interfaces – Perfect partner **
**2-11 Enumerated (Enum) **
**2-12 Generics part 1 **
**2-13 Generics part 2- Constraint Generics **
**2-14 Generics Part 3 – The use of generics in classes and interfaces
**2-15 Type aliases, literals, and cross types **
**2-16 Declaration file **
**2-17 Built-in types **
Chapter 3 Introduction to Vue3.0: New features **
Start with a look at the new vue3 changes, then start with why vue3 is there, leading you through the compostion API, custom Hooks, Teleport, Suspense and global API changes. **
**3-1 VuE3 New feature Tour **
**3-2 Why vue3**
**3-3 Using vuE-CLI to configure the VUE3 development environment **
**3-4 Project file structure analysis and recommended plug-in installation **
**3-5 vuE3-ref is a useful example
-Reactive **
**3-7 New twist on vue3 responsive objects **
**3-8 Old bottle new wine – Life cycle **
**3-9 Detect changes – Watch **
**3-10 VuE3 modular nous – Mouse tracker **
**3-11 Modular difficulty increased – useURLLoader**
**3-12 Modularization with typescript – Generic transformation **
**3-13 Typescript support for vue3 **
**3-14 Teleport – Teleport Part 1 **
**3-15 Teleport – Teleport Part 2 **
**3-16 Suspense – Asynchronous Requests for Good Help Part 1 **
**3-17 Suspense – Asynchronous Requests for Good Help Part 2 **
**3-18 Global API changes **
** Chapter 4 Project Launch – Preparations and first page **
** This chapter starts from the analysis of the requirements of the project, then determines the overall structure and code specifications of the project, and selects Bootstrap as the style library for the project, writes ColumnList and GlobalHeader to complete the simple practice. Start with the first complex Dropdown component, and finally abstract away the first hooks function. . **
**4-1 Project launch requirements analysis **
**4-2 File structure and code specification **
**4-3 style solution Introduction and analysis **
**4-4 Design diagram splitting and component property analysis **
**4-5 ColumnList Component number **
**4-6 ColumnList components beautify ** using Bootstrap
**4-7 GlobalHeader component encoding **
**4-8 Basic functions of the Dropdown component **
**4-9 Dropdown component adds DropdownItem**
**4-10 Dropdown component click on the external area to automatically hide **
**4-11 useClickOutside the first custom function **
** Chapter 5 World of Forms – Complete the custom Form component **
** This chapter comes to the world of forms and completes the whole process of developing a form component with validation from the beginning to the end. During the whole process, we also learn various knowledge points about V-Model, $attrs, Slot, component parent-child communication and MITT. **
**5-1 Classic elements of the Web world – forms **
**5-2 ValidateInput Part 1 — A simple implementation trial **
**5-3 ValidateInput Part 2 — Abstract validation rules **
**5-4 ValidateInput Part 3 — V-Model ** support
**5-5 ValidateInput encoding Part 4 — use $attrs to support the default attribute **
**5-6 ValidateForm component requirements analysis **
**5-7 ValidateForm encoding Part 1 – Use slot**
**5-8 ValidateForm Encoding Part 2 – Try parent-child communication **
**5-9 ValidateForm Coding Part 3 – Finding Mitt for foreign aid **
**5-10 ValidateForm Coding Part 4 – Done **
Chapter 6 – Initial use of vuE-Router and vuex
** This chapter introduces the concept of SPA, completes the installation of VUE-Router, and then learns its basic use, information acquisition, dynamic jump, front-guard, meta information and other knowledge points. Then it introduces the specific definition of state management tool, so as to introduce the installation of VUEX and its state. Mutation, getter and other basic knowledge. . **
**6-1 What is SPA (Single Page Application)? **
**6-2 Vue-router installation and use **
**6-3 Vue-router Configures routes **
**6-4 vue-router Adds a route **
**6-5 Adding the columnDetail page **
**6-6 What is the status management tool **
**6-7 Vuex Introduction and Installation **
**6-8 Vuex integration with current applications **
Use Vuex getters**
**6-10 Add new article page **
**6-11 Vue router add router guard – front guard **
**6-12 Vue router Add route guard – Use meta information to complete permission management **
** Chapter 7 Front and Back End Integration – Project integration back end interface **
** This chapter starts with the concepts of back and forth end separation and RESTful, introduces how to use swagger debugging tool for students, and then introduces Axios, through the addition of Vuex Action, realizes async transformation and axios interceptor basic usage. Finally, the encoding and implementation process of a Loader component is abstracted. **
**7-1 What is front-end and back-end separation development **
**7-2 RESTful API design concept **
**7-3 Use Swagger online document 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 requests **
**7-6 Sending asynchronous requests using vuex Action Part 2 **
**7-7 Modify asynchronous requests ** with async and await
**7-8 Use axios interceptor to add loading effect **
**7-9 Loader component coding Part I – Basic implementation **
**7-10 Loader component coding Part 2 – Retrofit using Teleport **
** Chapter 8 Access Credentials – Permission management **
** This chapter describes the principle and implementation of JWT universal authentication tool from the beginning of obtaining token, and then completes the axios setting common header and persistent login processing methods, and then adds global universal error handling. Finally, the encoding and implementation process of a general component Message is abstracted. **
**8-1 Log in to the first part to obtain token**
**8-2 JWT operating mechanism **
**8-3 Login Part 2 AXIos sets the generic header**
**8-4 Login Part 3 Persisting Login status **
**8-5 General error handling **
**8-6 Creating the Message component **
**8-7 Message component improved to function call form **
**8-8 Assignment: Writing the registration page **
** Chapter 9 Path one foot higher – Upload component **
** This chapter realizes the whole process of Upload component from analysis and coding. In this process, we will learn: the principle of uploading files, the method of uploading files using AXIOS, and the development process of a complex component step by step. **
** Chapter 10 final features – Edit and delete articles **
** through the completion of the article editing and deleting functions, led to the previous components left several bugs, by solving the bug to bring you continuous optimization ideas and programs, finally completed a general Modal component coding process. **
** Chapter 11 Continuous Optimization **
** Found two parts of the application that could be optimized through analysis, proposed and coded store optimization solutions for array to object, and solutions to prevent repeated requests. Finally, the logical implementation of useLoadMore was abstracted, culminating in a complex custom Hooks. **
** Chapter 12 Project Construction and Deployment **
** Starts with the concepts of production and the similarities and differences between production and development environments, and then practices the concepts of application build, build code live, and build code continuous integration. **
** Chapter 13 Course Summary **
** This chapter provides a review of the course. **
** This course is constantly being updated **
Ultra clear original painting complete in MP4 format