Vue3.0 (versión oficial) + TS imita el proyecto de nivel empresarial de columna
Combate de proyectos de nivel empresarial Vue3.0. Combinando tecnologías populares con dos espadas, Vue3.0 coopera con TypeScript y utiliza la nueva versión de Vuex y Vue-Router para completar el complejo proyecto de combate real de separación de front-end. Una serie de desarrollo de componentes generales de fácil a difícil, le permite aprender ideas y habilidades de desarrollo de biblioteca de componentes básicos. Acceda a la API de back-end real, despídase de los datos simulados y proporcione depuración y consultas en línea de Swagger. Conozca los puntos débiles del desarrollo de la separación de front-end y back-end: administración de permisos, control de enrutamiento, diseño de la estructura de la tienda global, implementación de caché de front-end, etc.
Para la multitud
1: desarrollador front-end 3 años de experiencia en
ingresar a la comunidad de graduados en
requisitos de reserva técnica
HTML / CSS / JS
Conceptos básicos básicos de JavaScript
Conceptos básicos de JavaScript Vue2
Capítulo 1 Introducción al curso
Este capítulo presenta el contenido de todo el curso, para que todos comprendan el núcleo y la organización del curso.
1-1 Introducción al curso (guía) Eche un vistazo a
1-2 Precauciones para el uso de bibliotecas de códigos y documentos en línea (debe ver)
Capítulo 2 Hola, TypeScript: ingrese al mundo de los tipos
Este capítulo principalmente lo ayuda a comprender los problemas que TypeScript puede resolver y lo que trae Las ventajas de, lo llevan a aprender los diversos tipos básicos en TS y luego avanzar a tipos complejos, que incluyen: Array, Tuple, interfaz, función, Class, Enum, Generices, etc., para ayudarlo a comprender rápidamente el uso básico y la sintaxis de TS.
2-1 Qué es Typescript
2-2 Por qué debería aprender mecanografiado
2-3 Instalar mecanografiado
2-4 Tipos de datos primitivos y cualquier tipo
2-5 Matrices y tuplas
2-6 Interfaz - Introducción
2-7 Funciones
2-8 Inferencia de tipos Tipos asociados y afirmaciones de tipos
2-9 clase: la primera clase se encuentra con
2-10 clases e interfaces: el compañero perfecto
2-11 Enum
2-12 Genéricos Parte 1
2-13 Genéricos 2 Genéricos de restricción parcial
2-14 Genéricos Parte III-Uso de genéricos en clases e interfaces
2-15 Alias de tipo, literales y tipos intercalados
2-16 Documentos de declaración
2-17 Tipos incorporados
Capítulo 3 Introducción a Vue3 .0: Descripción detallada de las nuevas funciones
Primero, explore los nuevos cambios traídos por vue3, y luego presente el tema de por qué existe vue3, y lo guiará a aprender sobre la API de compilación, Hooks personalizados, Teleport, Suspense y la modificación global de API.
3-1 Recorrido por las nuevas funciones de vue3
3-2 ¿Por qué existe vue3
3-3 Utilice vue-cli para configurar el entorno de desarrollo de vue3
3-4 Análisis de la estructura de archivos del proyecto e instalación recomendada del complemento
3-5 Vue3-El uso mágico de ref
3-6 Más reciente
Reactivo en un paso 3-7 vue3 nuevos trucos de objetos sensibles
3-8 botellas viejas de vino nuevo-ciclo de vida
3-9 detectar cambios-observar
3-10 vue3 rastreador de ratón mágico
modular 3-11 dificultad modular aumento-usoURLLoader
3-12 Modularización combinada con transformación mecanografiada-genérica
3-13 La bendición de mecanografiado de vue3
3-14 Teleport-Teleportación parte 1
3-15 Teleport-Teleportación parte 2
3-16 Suspenso-Asistente de solicitud asíncrona Parte
1 3 -17 Suspense-Un buen ayudante para solicitudes asincrónicas Parte 2
3-18 Modificaciones globales de API
Capítulo 4 Project Set Sail-Preparaciones y la primera página
Este capítulo comienza con el análisis de los requisitos del proyecto, y luego determina la estructura general y las especificaciones de código del proyecto, y El proyecto eligió Bootstrap como la biblioteca de estilo. Después de completar una práctica práctica simple escribiendo ColumnList y GlobalHeader, comencé a desafiar el primer componente más complejo del menú desplegable y finalmente resumí la primera función de ganchos. ...
4-1 Análisis de requisitos de navegación del proyecto
4-2 Estructura de archivos y especificación de código
4-3 Introducción y análisis de soluciones de estilo
4-4 División de dibujos de diseño y análisis de propiedades de componentes
4-5 Codificación del componente
ColumnList 4-6 Componente ColumnList embellecido con Bootstrap
4 -7 Codificación del componente GlobalHeader
4-8 Codificación de la función básica del componente desplegable
4-9 Adición del componente desplegable
Elemento desplegable 4-10 El componente desplegable hace clic en el área exterior para ocultarlo automáticamente
4-11 useClickOutside La primera función personalizada
Capítulo 5 El mundo del formulario: complete la personalización Componente de formulario
Este capítulo llega al mundo de los formularios. De principio a fin, hemos completado un proceso de desarrollo completo de componentes de formulario con validación. En todo el proceso, también aprendimos v-model, $ attrs, slot, componente de comunicación padre-hijo y Varios puntos de conocimiento de mitt.
5-1 Los elementos clásicos del mundo web-Formularios
5-2 ValidateInput Parte 1-Un ejemplo de implementación simple
5-3 ValidateInput Parte 2-Reglas de validación abstracta
5-4 ValidateInput Parte 3-Soporte v-model
5-5 ValidateInput parte de codificación Cuatro partes: use $ attrs para admitir atributos predeterminados
5-6 Análisis de requisitos de componentes de ValidateForm
5-7 Codificación de ValidateForm parte ranura de un solo uso
5-8 Codificación de ValidateForm parte dos intentos de comunicación entre padres e hijos
5-9 Codificación de ValidateForm parte tres: búsqueda Ayuda extranjera mitt
5-10 Codificación de ValidateForm parte 4- ya está
Capítulo 6 Por favor, cómete el cubo de toda la familia: uso preliminar de vue-router y vuex
Este capítulo se deriva del concepto de SPA, completó la instalación de vue-router y luego aprende su uso básico, Se introducen diversos puntos de conocimiento como adquisición de información, salto dinámico, vanguardia y metainformación, y luego se introduce la definición específica de herramientas de gestión de estados, lo que lleva a la instalación de vuex y su estado, mutación, captador y otros puntos de conocimiento básicos. ...
6-1 ¿Qué es la aplicación SPA (aplicación de página única)?
6-2 instalación y uso de
vue-router 6-3 vue-router configurar enrutamiento
6-4 vue-router agregar ruta
6-5 agregar columnaDetalle página
6-6 cuál es la herramienta de administración de estado
6-7 Introducción e instalación de
Vuex 6-8 Vuex Integrar la aplicación actual
6-9 Usar captadores de Vuex
6-10 Agregar artículo nuevo página
6-11 enrutador Vue Agregar guardia de enrutador-Guardia frontal
6-12 enrutador Vue Agregar guardia de enrutador-Usar metainformación para completar la administración de autoridad
Capítulo 7 Integración de front-end- Interfaz de back-end de integración de proyectos
Este capítulo comienza con la separación de conceptos de front-end y back-end y RESTful, presenta cómo usar la herramienta de depuración swagger proporcionada para los estudiantes y luego presenta axios, mediante la adición de la acción vuex, se da cuenta del uso básico de la transformación asíncrona y el interceptor de axios, y finalmente Resumen del proceso de codificación e implementación de un componente Loader.
7-1 ¿Cuál es la separación del desarrollo de front-end y back-end?
7-2 Concepto de diseño de API RESTful
7-3 Use la documentación en línea
de Swagger para ver los detalles de la interfaz 7-4 Uso básico de axios y uso exclusivo de API back-end (debe ver)
7-5 Use la acción vuex para enviar Solicitud asincrónica
7-6 Use la acción vuex para enviar la solicitud asincrónica Parte 2
7-7 Use async y espere para transformar la solicitud asincrónica
7-8 Use el interceptor axios para agregar el efecto de carga
7-9 Codificación del componente del cargador Parte I-Implementación básica del
componente 7-10 Loader La segunda parte de la codificación: use Teleport para transformar
Capítulo 8 Credenciales de paso: administración de permisos
Este capítulo comienza con la obtención del token, explica el principio y la implementación de la herramienta de autenticación universal JWT y luego completa la configuración de axios encabezado general y método de procesamiento de inicio de sesión persistente , Y luego agregó el manejo global de errores generales, y finalmente resumió el proceso de codificación e implementación de un componente general Mensaje.
8-1 Inicie sesión en la primera parte para obtener el token
8-2 El mecanismo operativo de jwt
8-3 Inicie sesión en la segunda parte de axios para establecer el encabezado común
8-4 Inicie sesión en la tercera parte del estado de inicio de sesión persistente
8-5 Manejo de errores generales
8-6 Componente Crear mensaje
8 -7 Componente de mensaje mejorado a un formulario de llamada de función
8-8 Asignación: Preparación de
la página de registro Capítulo 9-Componente de carga
Este capítulo implementa todo el proceso del componente de carga desde el análisis y la codificación. En este proceso, aprenderemos Para: El principio de cargar archivos, usar axios para completar el método de cargar archivos y completar gradualmente el proceso de desarrollo de un componente complejo.
Capítulo 10 Función final: edición y eliminación de artículos.
Al completar las funciones de edición y eliminación del artículo, aparecieron varios errores dejados por los componentes anteriores. Al resolver los errores, le brindó ideas y soluciones para la optimización continua, y finalmente completó una modalidad general El proceso de codificación del componente.
Capítulo 11 Optimización continua
A través del análisis, encontramos dos partes que se pueden optimizar en la aplicación, y propusimos y codificamos el esquema de optimización de la tienda para cambiar la matriz al objeto y la solución para evitar solicitudes repetidas. Finalmente, además de la implementación lógica de useLoadMore, finalmente se completó un complejo Hooks personalizado.
La construcción e implementación del proyecto del capítulo 12
comienza con el concepto de entorno de producción y las similitudes y diferencias entre el entorno de producción y el entorno de desarrollo, y luego practica una serie de conceptos de construcción de aplicaciones, código de construcción en línea e integración continua del código de construcción.
Capítulo 13 Resumen del curso
Este capítulo le lleva a revisar el contenido del curso.
Este curso se actualiza continuamente