HyrKGsWebsite

IntroducciónPresentar

Mi proyecto personal de aprendizaje front-end de base cero: ¡aprendizaje basado en tareas! Actualizado de vez en cuando, normalmente tengo trabajo y estudio que hacer.

☞Vista previa: http://hyrkg.cn

Bienvenido esquina superior derecha ↗️ STAR mi proyecto, ¡aprendamos y progresemos juntos!

? Mi plan Lista de tareas pendientes:

• backend de primavera
• Inicie sesión en el sistema (se espera que utilice oauth2)
  • Almacenamiento local y almacenamiento de sesión
• Insertar VitePress en mi sitio web (parece difícil)
• ¡Grandes planes! ?Mesa redonda
  • Interfaz frontal
  • Enlace largo, ¿tal vez WebSocket?
• vuex, siento que todavía necesito aprenderlo primero.

? ¡Completado! Lista comprobada:

• (css) Hacer que la interfaz sea perfectamente compatible con el modo nocturno
• (vue-TransitionGroup) Deja que mi patio de juegos tenga animaciones geniales
• (vue, js) permite agregar o eliminar componentes infinitamente. ¡Enumere los componentes de carga en lugar de escribir directamente en html!
• (vue, css) ¡Mi propio componente de contenedor flexible!
• ?Qué lindo tener una página dedicada a aprender y jugar. ?¡Nace el parque infantil!
• (vue-router) La página de inicio personal no requiere una barra de navegación y desea un efecto de página única. Utilice elementos secundarios en rutas para implementar funciones de página única y de página general
• (vue-router) ¡Implemente la función de navegación y haga que la barra de navegación sea algo útil!
• (vue, js) Intente agregar elementos (lista responsiva, propiedades calculadas, implementación del componente de escucha) haciendo clic en un botón. Ahora se mudó al patio de recreo.
• (vue) ¡Haz que mi tarjeta sea componente VUE!
• (css) Optimice el efecto de animación de la tarjeta, ¡se desplazará cuando se coloque el mouse sobre ella!
• (css) ¡Cambie la barra de navegación de element-plus por la suya propia!
• (css) hacer el mío propio doblar (Al principio, en realidad era grid, pero lo descubrí más tarde) Estilo
• (vue) Logotipo compatible con el modo nocturno
• (nginx) subido a mi servidor!
• Utilice vite+vue+element-ui(element-plus-vite-starter) para crear su propio proyecto vue

?️ Conocimientos cubiertos:

No tengo ninguna experiencia en desarrollo front-end, así que aprendí de Baidu, Google o leyendo documentos durante mi práctica. Los siguientes están todos presentes en mi sitio web, ordenados según la ruta de aprendizaje, puede consultarlos como referencia.

VUE

Aprendí la API combinada directamente. Como dice el refrán, ¡aprenda lo nuevo pero no lo viejo! La biblioteca de componentes utiliza element-plus de Alibaba.

• [Conceptos básicos de la capacidad de respuesta] reactivo (no uso esto con frecuencia, hago referencia a todo directamente), ref (el objeto que se actualiza se vuelve receptivo), v-bind (de uso común), {{}}
• [Conceptos básicos de gramática] v-if (uso común), v-for (uso común), v-on (uso común), v-model
• 【Atributo calculado】 calculado
• Accesorios de [componentización] (de uso común), espacios (nombre, templo. De uso común), retorno de evento [$emit], atributos transparentes
• [Gestión de enrutamiento] Configuración básica de vue-router (ruta, redireccionamiento, alias, hijos, componente)
• 【Animación】Transición, Grupo de Transición
• [Modo nocturno] El principio es agregar una clase (oscura) a html
• Reloj [monitoreo responsivo]

JavaScript/Mecanografiado

• [Variables] var, let, const (uso común)
• [Conceptos básicos de los objetos] matriz [], objeto {} (lo uso como mapa), todo es un objeto (en este punto comprenderá por qué ref requiere un valor antes de poder usarse)
• [Método, paso de parámetros, reutilización] importación, función (puede comprender el principio de cálculo combinando que todo es un objeto)

CSS/SCSS:

• 【Conceptos básicos de estilo】
• 》》Estilo de fuente: color, tamaño de fuente, familia de fuentes (fuente, copio directamente la de otras personas)
• 》》Estilo de contenedor: color de fondo, radio de borde (esquinas redondeadas), sombra de cuadro (sombra de borde), borde (dibujo de borde, normalmente lo activo cuando diseño el diseño)
• [Conceptos básicos de diseño] relleno (ajuste de distancia dentro del contenedor), margen (ajuste de distancia fuera del contenedor), ancho/alto (el 100% se puede rellenar automáticamente, de lo contrario quedará feo), ancho máximo/alto máximo
• [El diseño responsivo (flexible) puede hacer que la página sea compatible con teléfonos móviles] visualización: flex, flex-direction, flex-wrap, justify-content, flex-grow (de uso común)
• [Conceptos básicos de la animación] transición, transformación, pseudoclase (como: desplazamiento)
• [Prioridad de estilo]!import (Mi mal hábito: en caso de duda, simplemente !import)

HTML

Parece que no hay ningún punto de conocimiento especial, solo varias etiquetas. Para las necesidades básicas, simplemente use Baidu.

• Simplemente poder usar divs para dividir, y los divs con etiquetas y sintaxis básicamente pueden resolver la mayoría de las cosas.
• ¡Consejos! ¡La etiqueta del templo de Vue no afecta el estilo!