HyrKGsWebsite

IntroductionIntroduire

Mon projet personnel d'apprentissage front-end base zéro, un apprentissage axé sur les tâches ! Mis à jour de temps en temps, j'ai généralement du travail et des études à faire.

☞Aperçu : http://hyrkg.cn

Bienvenue dans le coin supérieur droit ↗️ STAR mon projet, apprenons et progressons ensemble !

? Ma liste de tâches :

• Moteur de printemps
• Connectez-vous au système (devrait utiliser oauth2)
  • stockage local et stockage de session
• Intégrer VitePress dans mon site Web (semble difficile)
• De grands projets ! ?Table ronde
  • Interface frontale
  • Lien long, peut-être WebSocket ?
• vuex, j'ai l'impression que je dois encore l'apprendre d'abord.

? Complété! Liste vérifiée :

• (css) Rendre l'interface parfaitement compatible avec le mode nuit
• (vue-TransitionGroup) Que mon terrain de jeu ait des animations sympas
• (vue, js) permet d'ajouter ou de supprimer des composants à l'infini. Lister les composants de chargement au lieu d'écrire directement en HTML !
• (vue, css) Mon propre composant conteneur flexible !
• ?Comme c'est agréable d'avoir une page dédiée à l'apprentissage et au jeu. ?Le terrain de jeu est né !
• (vue-router) La page d'accueil personnelle ne nécessite pas de barre de navigation et souhaite un effet d'une seule page. Utiliser des enfants dans les routes pour implémenter des fonctions de page unique et de page générale
• (vue-router) Implémentez la fonction de navigation et rendez la barre de navigation quelque peu utile !
• (vue, js) Essayez d'ajouter des éléments (liste réactive, propriétés calculées, implémentation du composant d'écoute) en cliquant sur un bouton. Maintenant déplacé vers ?playground
• (vue) Fabriquer le composant VUE de ma carte !
• (css) Optimisez l'effet d'animation de la carte, elle survolera lorsque la souris sera posée dessus !
• (css) Remplacez la barre de navigation d'element-plus par la vôtre !
• (css) Créer le mien fléchir (Au début, c'était en fait une grille, mais je l'ai découvert plus tard)
• (vue) Logo compatible avec le mode nuit
• (nginx) téléchargé sur mon serveur !
• Utilisez vite+vue+element-ui(element-plus-vite-starter) pour créer votre propre projet vue

?️ Connaissances couvertes :

Je n'ai aucune expérience en développement front-end, j'ai donc appris de Baidu, de Google ou de la lecture de documents au cours de ma pratique. Les éléments suivants sont tous présents sur mon site internet, triés selon le parcours d'apprentissage, vous pouvez vous y référer pour référence.

VUE

J'ai appris directement l'API combinée. Comme le dit le proverbe, apprenez le nouveau mais pas l'ancien ! La bibliothèque de composants utilise l’élément-plus d’Alibaba.

• [Bases de la réactivité] réactif (je ne l'utilise pas souvent, je référence tout directement), ref (l'objet référencé devient réactif), v-bind (couramment utilisé), {{}}
• [Bases de la grammaire] v-if (couramment utilisé), v-for (couramment utilisé), v-on (couramment utilisé), v-model
• 【Attribut calculé】 calculé
• Accessoires [Componentization] (couramment utilisés), emplacements (nom, temple. Couramment utilisés), retour d'événement [$emit], attributs transparents
• [Gestion du routage] Configuration de base de vue-router (chemin, redirection, alias, enfants, composant)
• 【Animation】Transition, TransitionGroup
• [Mode Nuit] Le principe est d'ajouter une classe (dark) au html
• Montre [Surveillance réactive]

JavaScript/TypeScript

• [Variables] var, let, const (couramment utilisé)
• [Bases des objets] array[], object{} (je l'utilise comme carte), tout est un objet (à ce stade, vous comprendrez pourquoi ref nécessite une valeur avant de pouvoir être utilisé)
• [Méthode, passage de paramètres, réutilisation] import, fonction (vous pouvez comprendre le principe du calcul en combinant que tout est un objet)

CSS/SCSS :

• 【Bases du style】
• 》》Style de police : couleur, taille de police, famille de polices (police, je copie directement celle des autres)
• 》》Style du conteneur : couleur d'arrière-plan, rayon de bordure (coins arrondis), ombre de boîte (ombre de bordure), bordure (dessin de bordure, je l'active généralement lors de la conception de la mise en page)
• [Bases de la mise en page] rembourrage (réglage de la distance à l'intérieur du conteneur), marge (réglage de la distance à l'extérieur du conteneur), largeur/hauteur (100 % peut être rempli automatiquement, sinon ce sera moche), largeur maximale/hauteur maximale
• [La mise en page réactive (flex) peut rendre la page compatible avec les téléphones mobiles] affichage : flex, flex-direction, flex-wrap, justification-content, flex-grow (couramment utilisé)
• [Bases de l'animation] transition, transformation, pseudo-classe (comme : survol)
• [Priorité au style]!import (Ma mauvaise habitude : en cas de doute, il suffit de !import)

HTML

Il semble qu'il n'y ait pas de point de connaissance particulier, juste diverses balises. Pour les besoins de base, utilisez simplement Baidu.

• Soyez simplement capable d'utiliser des divs pour diviser, et les divs avec des balises et une syntaxe peuvent essentiellement résoudre la plupart des problèmes.
• Conseils! La balise temple de Vue n'affecte pas le style !