HyrKGsWebsite

IntroduçãoIntroduzir

Meu projeto pessoal de aprendizagem baseada em zero, aprendizagem orientada por tarefas! Atualizado de tempos em tempos, geralmente tenho trabalho e estudo para fazer.

☞Visualização: http://hyrkg.cn

Bem vindo canto superior direito ↗️ STAR meu projeto, vamos aprender e progredir juntos!

? Lista de tarefas do meu plano:

• Back-end do Spring
• Faça login no sistema (espera-se usar oauth2)
  • armazenamento local e armazenamento de sessão
• Incorporar VitePress em meu site (parece difícil)
• Grandes planos! ?Mesa Redonda
  • Interface front-end
  • Link longo, talvez WebSocket?
• vuex, sinto que ainda preciso aprender primeiro.

? Concluído! Lista verificada:

• (css) Torne a interface perfeitamente compatível com o modo noturno
• (vue-TransitionGroup) Deixe meu playground ter animações legais
• (vue, js) permite que componentes sejam adicionados ou excluídos infinitamente. Liste os componentes de carregamento em vez de escrever diretamente em HTML!
• (vue, css) Meu próprio componente flex container!
• ?Que bom ter uma página dedicada a aprender e brincar. ?O parque infantil nasceu!
• (vue-router) A página inicial pessoal não requer barra de navegação e deseja um efeito de página única. Use filhos em rotas para implementar funções de página única e de página geral
• (vue-router) Implemente a função de navegação e torne a barra de navegação útil!
• (vue, js) Tente adicionar elementos (lista responsiva, propriedades calculadas, implementação de componente de escuta) clicando em um botão. Agora movido para? Playground
• (vue) Faça o componente VUE do meu cartão!
• (css) Otimize o efeito de animação do cartão, ele irá pairar quando o mouse for colocado sobre ele!
• (css) Mude a barra de navegação do element-plus para a sua!
• (css) Faça o meu próprio flexionar (No início, era na verdade uma grade, mas descobri mais tarde) Estilo
• (vue) Logotipo compatível com modo noturno
• (nginx) carregado no meu servidor!
• Use vite+vue+element-ui(element-plus-vite-starter) para construir seu próprio projeto vue

?️ Conhecimentos abrangidos:

Não tenho nenhuma experiência em desenvolvimento front-end, então aprendi com Baidu, Google ou lendo documentos durante minha prática. Os seguintes estão todos presentes no meu site, classificados de acordo com o caminho de aprendizagem, você pode consultá-los para referência.

VUE

Aprendi a API combinada diretamente. Como diz o ditado, aprenda o novo, mas não o antigo! A biblioteca de componentes usa o element-plus do Alibaba.

• [Noções básicas de capacidade de resposta] reativo (não uso isso com frequência, refiro tudo diretamente), ref (o objeto que está sendo refedado torna-se responsivo), v-bind (comumente usado), {{}}
• [Noções básicas de gramática] v-if (comumente usado), v-for (comumente usado), v-on (comumente usado), v-model
• 【Atributo computado】computado
• [Componentização] adereços (comumente usados), slots (nome, templo. Comumente usados), retorno de evento [$emit], atributos transparentes
• [Gerenciamento de Roteamento] Configuração básica do vue-router (caminho, redirecionamento, alias, filhos, componente)
• 【Animação】Transição, Grupo de Transição
• [Modo Noturno] O princípio é adicionar uma classe (dark) ao html
• [Monitoramento responsivo] assistir

JavaScript/TypeScript

• [Variáveis] var, let, const (comumente usadas)
• [Noções básicas de objetos] array[], objeto{} (eu uso como mapa), tudo é um objeto (neste ponto você entenderá porque ref requer valor antes de poder ser usado)
• [Método, passagem de parâmetro, reutilização] importação, função (você pode entender o princípio do cálculo combinando que tudo é um objeto)

CSS/SCSS:

• 【Noções básicas de estilo】
• 》》Estilo da fonte: cor, tamanho da fonte, família da fonte (fonte, copio diretamente de outras pessoas)
• 》》Estilo do contêiner: cor de fundo, raio da borda (cantos arredondados), sombra da caixa (sombra da borda), borda (desenho da borda, costumo ligá-lo ao projetar o layout)
• [Noções básicas do layout] preenchimento (ajuste de distância dentro do contêiner), margem (ajuste de distância fora do contêiner), largura/altura (100% pode ser preenchido automaticamente, caso contrário ficará feio), largura máxima/altura máxima
• [Layout responsivo (flexível) pode tornar a página compatível com telefones celulares] exibição: flex, flex-direction, flex-wrap, justify-content, flex-grow (comumente usado)
• [Noções básicas de animação] transição, transformação, pseudoclasse (como: pairar)
• [Prioridade de estilo]!import (Meu mau hábito: em caso de dúvida, apenas !import)

HTML

Parece que não existe um ponto de conhecimento especial, apenas várias tags. Para necessidades básicas, basta usar o Baidu.

• Basta ser capaz de usar divs para dividir, e divs com tags e sintaxe podem basicamente resolver a maioria das coisas.
• Pontas! A etiqueta do templo do Vue não afeta o estilo!