HyrKGsWebsite

簡介Introduce

我個人的前端零基礎學習項目，任務驅動學習！不定期更新，平常有工作和學習要做。

☞ 預覽(preview): http://hyrkg.cn

歡迎右上角↗️ STAR我的項目，讓我們共同學習進步！

?我的計劃 To-do List:

• Spring後端
• 登陸系統（預計使用oauth2）
  • localStorage & sessionStorage
• 將VitePress嵌入我的網站之中（似乎很困難）
• 大計劃！ ?圓桌(round-table)
  • 前端介面
  • 長鏈接，或許是WebSocket？
• vuex，感覺還是要先學

? 完成！ Checked List:

• (css) 讓介面可以完美相容夜間模式
• (vue-TransitionGroup) 讓我的?playground有酷炫動畫
• (vue、js)讓元件可以無限增加或自我刪除。清單載入元件，而不是直接寫到html內！
• (vue、css) 我自己的flex容器組件！
• ?有一頁用來專門學習與玩耍多好。 ?playground誕生！
• (vue-router) 個人主頁不要導覽欄，想要單頁效果。使用配合routes中children實作單頁(singleton)與通用頁面功能
• (vue-router) 實現導覽功能，讓導覽列有點真正的用處！
• (vue、js) 嘗試點選按鈕就增加元素（響應式清單、計算屬性、監聽元件實作）。現已搬遷到?playground
• (vue) 將我的卡片VUE組件化！
• (css) 優化卡片動畫效果，滑鼠放上去會懸浮！
• (css) 爆改element-plus的導覽列成自己的！
• (css) 製作屬於我自己的flex (早期其實是grid，後期才發現)風格樣式
• (vue) 相容於夜間模式的logo
• (nginx) 上架到我的伺服器！
• 使用vite+vue+element-ui(element-plus-vite-starter) 建立自己的vue項目

?️ 已覆蓋知識點Covered knowledges:

我沒有任何前端開發經驗，都是在我實作過程中百度谷歌或看文件學習。以下都存在於我的網站之中，根據學習路徑先後排序，可以參考學習。

VUE

我是直接學的組合式API，熟話說學新不學舊！元件庫用的阿里的element-plus

• 【響應式基礎】reactive(這個我不常用，我直接ref萬物)、ref(被ref的對象就變成響應式了)、v-bind(常用)、{{}}
• 【語法基礎】v-if(常用)、v-for(常用)、v-on(常用)、v-model
• 【計算屬性】computed
• 【組件化】props(常用)、插槽(name、temple。常用)、事件回傳[$emit]、透傳attributes
• 【路由管理】vue-router的基礎設定(path、redirect、alias、children、component)
• 【動畫】Transition、TransitionGroup
• 【夜間模式】原理就是給html加上了一個class（dark）
• 【響應式監聽】watch

JavaScript / TypeScript

• 【變數】var、let、const(常用)
• 【物件基礎】array[]、物件{}(我當map用)、萬物皆物件(到這就了解為什麼ref出來的要value才能用了)
• 【方法、傳參、復用】 import、function(結合萬物皆物件可以了解computed原理了)

CSS / SCSS:

• 【樣式基礎】
• 》》字體樣式： color、font-size、font-family(字體，我直接copy別人的)
• 》》容器樣式： background-color、border-radius(圓角)、box-shadow(邊框陰影)、border(邊框繪製，我通常設計佈局時都會打開)
• 【佈局基礎】padding(容器內距離調整)、margin(容器外距離調整)、width/height(100%可以自動填滿，不然很醜) 、max-width/max-height
• 【響應式(flex)佈局，可以讓頁面相容手機】display:flex、flex-direction、flex-wrap、justify-content、flex-grow(常用)
• 【動畫基礎】transition、transform、偽類(如:hover)
• 【樣式優先權】!import(我的壞習慣：遇事不決就!import)

HTML

好像沒啥特別知識點，就是各類標籤，基本上需要就百度。

• 會用div劃分就行了，div套標籤、套語法基本上解決大部分事情了。
• 小技巧！ vue的temple 標籤不影響樣式！