HyrKGsWebsite

소개Introduce

나만의 프론트엔드 제로기반 학습 프로젝트, 과제 중심 학습! 수시로 업데이트되며 대개 할 일과 공부가 있습니다.

☞미리보기 : http://hyrkg.cn

환영합니다 오른쪽 상단 ↗️ 내 프로젝트에 STAR를 표시해 함께 배우고 발전해 나가세요!

? 내 계획 할 일 목록:

• 스프링 백엔드
• 시스템에 로그인(oauth2 사용 예정)
  • localStorage 및 세션스토리지
• 내 웹사이트에 VitePress 삽입(어려워보임)
• 큰 계획! ?원탁
  • 프런트엔드 인터페이스
  • 긴 링크, 어쩌면 WebSocket일까요?
• 음, 그래도 먼저 배워야 할 것 같아요.

? 완전한! 체크리스트:

• (css) 야간 모드와 완벽하게 호환되는 인터페이스를 만듭니다.
• (vue-TransitionGroup) 내 놀이터에 멋진 애니메이션을 적용해 보세요
• (vue, js)를 사용하면 구성 요소를 무한히 추가하거나 삭제할 수 있습니다. HTML에 직접 작성하는 대신 로드 구성요소를 나열하세요!
• (vue, css) 나만의 플렉스 컨테이너 컴포넌트!
• ?학습과 놀이 전용 페이지가 있다는 것은 얼마나 좋은 일입니까? ?놀이터가 탄생했습니다!
• (vue-router) 개인 홈페이지는 네비게이션 바가 필요 없으며 단일 페이지 효과를 원합니다. 경로의 하위 항목을 사용하여 단일 페이지 및 일반 페이지 기능 구현
• (vue-router) 내비게이션 기능을 구현하고 내비게이션 바를 좀 더 유용하게 만들어보세요!
• (vue, js) 버튼을 클릭하여 요소(반응형 목록, 계산된 속성, 청취 구성 요소 구현)를 추가해 보세요. 이제 ?놀이터로 이동했습니다.
• (vue) 내 카드 VUE 컴포넌트를 만들어보세요!
• (css) 카드 애니메이션 효과를 최적화합니다. 마우스를 위에 놓으면 카드가 맴돌게 됩니다!
• (css) element-plus의 네비게이션 바를 여러분의 것으로 바꿔보세요!
• (css) 내 것을 만들어 보세요 몸을 풀다 (초창기에는 실제로 그리드였는데 나중에 발견했습니다.) 스타일
• (vue) 야간 모드와 호환되는 로고
• (nginx) 내 서버에 업로드되었습니다!
• vite+vue+element-ui(element-plus-vite-starter)를 사용하여 자신만의 vue 프로젝트를 구축하세요.

?️ 다루는 지식:

저는 프론트엔드 개발 경험이 없어서 연습하면서 바이두나 구글에서 배우거나 문서를 읽으며 배웠어요. 다음은 모두 내 웹사이트에 있으며 학습 경로에 따라 정렬되어 있으므로 참고할 수 있습니다.

뷰

결합된 API를 직접 배웠습니다. 새로운 것은 배우되 낡은 것은 배우지 마세요! 구성 요소 라이브러리는 Alibaba의 요소 플러스를 사용합니다.

• [반응성의 기본] 반응성(자주 사용하지 않고 모든 것을 직접 참조함), ref(참조되는 객체가 반응형이 됨), v-bind(자주 사용됨), {{}}
• [문법기초] v-if(자주 사용), v-for(자주 사용), v-on(자주 사용), v-model
• 【계산된 속성】계산됨
• [컴포넌트화] props(공통 사용), 슬롯(이름, 사원. 자주 사용), 이벤트 리턴[$emit], 투명 속성
• [라우팅 관리] vue-router 기본 구성(경로, 리디렉션, 별칭, 하위, 컴포넌트)
• 【애니메이션】전환, 전환 그룹
• [야간 모드] html에 클래스(어두운)를 추가하는 것이 원칙입니다.
• [반응형 모니터링] 시계

자바스크립트/타입스크립트

• [변수] var, let, const (공통적으로 사용됨)
• [객체의 기본] array[], object{} (저는 맵으로 사용합니다), 모든 것이 객체입니다 (이 시점에서 ref를 사용하기 전에 값이 필요한 이유를 이해하게 될 것입니다)
• [메서드, 매개변수 전달, 재사용] import, function (모든 것이 객체라는 것을 결합하여 계산하는 원리를 이해할 수 있습니다)

CSS/SCSS:

• 【스타일 기본】
• 》》글꼴 스타일 : 색상, 글꼴 크기, 글꼴 모음(글꼴, 다른 사람의 글꼴을 직접 복사합니다)
• 》》컨테이너 스타일: background-color, border-radius(둥근 모서리), box-shadow(테두리 그림자), border(테두리 그리기, 레이아웃을 디자인할 때 주로 켜둡니다)
• [레이아웃 기본] padding(컨테이너 내부 거리 조정), margin(컨테이너 외부 거리 조정), 너비/높이(100%는 자동으로 채워지지만 그렇지 않으면 보기 흉해짐), max-width/max-height
• [반응형(플렉스) 레이아웃을 사용하면 페이지가 휴대폰과 호환될 수 있습니다.] 디스플레이: flex, flex-direction, flex-wrap, justify-content, flex-grow(일반적으로 사용됨)
• [애니메이션의 기초] 전환, 변형, 의사 클래스(예: 호버)
• [스타일 우선순위]!import (나의 나쁜 습관: 의심스러울 때는 그냥 !import)

HTML

특별한 지식 포인트는 없고 다양한 태그만 있는 것 같습니다. 기본적인 필요 사항은 Baidu를 사용하면 됩니다.

• div를 사용하여 나눌 수 있고 태그와 구문이 있는 div는 기본적으로 대부분의 문제를 해결할 수 있습니다.
• 팁! Vue의 Temple 태그는 스타일에 영향을 주지 않습니다!