HyrKGsWebsite

IntroductionIntroduce

My personal front-end zero-based learning project, task-driven learning! Updated from time to time, usually I have work and study to do.

☞Preview: http://hyrkg.cn

Welcome upper right corner ↗️ STAR my project, let us learn and make progress together!

? My plan To-do List:

• Spring backend
• Log in to the system (expected to use oauth2)
  • localStorage & sessionStorage
• Embed VitePress into my website (seems difficult)
• Big plans! ?Round-table
  • Front-end interface
  • Long link, maybe WebSocket?
• vuex, I feel like I still need to learn it first.

? Completed! Checked List:

• (css) Make the interface perfectly compatible with night mode
• (vue-TransitionGroup) Let my playground have cool animations
• (vue, js) allows components to be infinitely added or deleted. List loading components instead of writing directly into html!
• (vue, css) My own flex container component!
• ?How nice to have a page dedicated to learning and playing. ?Playground is born!
• (vue-router) The personal homepage does not require a navigation bar and wants a single-page effect. Use children in routes to implement single page and general page functions
• (vue-router) Implement the navigation function and make the navigation bar somewhat useful!
• (vue, js) Try to add elements (responsive list, calculated properties, listening component implementation) by clicking a button. Now moved to ?playground
• (vue) Make my card VUE component!
• (css) Optimize the card animation effect, it will hover when the mouse is placed on it!
• (css) Change the navigation bar of element-plus to your own!
• (css) Make my own flex (In the early days, it was actually grid, but I discovered it later) Style
• (vue) Logo compatible with night mode
• (nginx) uploaded to my server!
• Use vite+vue+element-ui(element-plus-vite-starter) to build your own vue project

?️ Covered knowledges:

I don’t have any front-end development experience, so I learned from Baidu, Google or reading documents during my practice. The following are all present on my website, sorted according to the learning path, you can refer to them for reference.

VUE

I learned the combined API directly. As the saying goes, learn the new but not the old! The component library uses Alibaba’s element-plus.

• [Basics of responsiveness] reactive (I don’t use this often, I ref everything directly), ref (the object being refed becomes responsive), v-bind (commonly used), {{}}
• [Basics of grammar] v-if (commonly used), v-for (commonly used), v-on (commonly used), v-model
• 【Computed attribute】computed
• [Componentization] props (commonly used), slots (name, temple. Commonly used), event return [$emit], transparent attributes
• [Routing Management] Basic configuration of vue-router (path, redirect, alias, children, component)
• 【Animation】Transition, TransitionGroup
• [Night Mode] The principle is to add a class (dark) to html
• [Responsive monitoring] watch

JavaScript/TypeScript

• [Variables] var, let, const (commonly used)
• [Basics of objects] array[], object{} (I use it as a map), everything is an object (at this point you will understand why ref requires value before it can be used)
• [Method, parameter passing, reuse] import, function (you can understand the principle of computed by combining that everything is an object)

CSS/SCSS:

• 【Style Basics】
• 》》Font style: color, font-size, font-family (font, I directly copy other people’s)
• 》》Container style: background-color, border-radius (rounded corners), box-shadow (border shadow), border (border drawing, I usually turn it on when designing the layout)
• [Layout basics] padding (distance adjustment inside the container), margin (distance adjustment outside the container), width/height (100% can be automatically filled, otherwise it will be ugly), max-width/max-height
• [Responsive (flex) layout can make the page compatible with mobile phones] display: flex, flex-direction, flex-wrap, justify-content, flex-grow (commonly used)
• [Basics of animation] transition, transform, pseudo-class (such as: hover)
• [Style priority]!import (My bad habit: when in doubt, just !import)

HTML

It seems that there is no special knowledge point, just various tags. For basic needs, just use Baidu.

• Just be able to use divs to divide, and divs with tags and syntax can basically solve most things.
• Tips! Vue's temple tag does not affect the style!