HyrKGsWebsite

Introduce. แนะนำตัว

โครงการการเรียนรู้แบบไม่มีศูนย์ส่วนหน้าส่วนตัวของฉัน การเรียนรู้ที่ขับเคลื่อนด้วยงาน! อัพเดทเป็นระยะๆ ปกติมีงาน มีเรียนทำ

☞ดูตัวอย่าง: http://hyrkg.cn

ยินดีต้อนรับมุมขวาบน ติดดาวโครงการของฉัน ให้เราเรียนรู้และก้าวหน้าไปด้วยกัน!

? แผนของฉัน รายการสิ่งที่ต้องทำ:

• แบ็กเอนด์สปริง
• เข้าสู่ระบบ (คาดว่าจะใช้ oauth2)
  • localStorage & sessionStorage
• ฝัง VitePress ในเว็บไซต์ของฉัน (ดูเหมือนยาก)
• แผนใหญ่! ?โต๊ะกลม
  • อินเทอร์เฟซส่วนหน้า
  • ลิงก์ยาวอาจเป็น WebSocket ใช่ไหม
• vuex ฉันรู้สึกว่ายังต้องเรียนรู้มันก่อน

? สมบูรณ์! รายการตรวจสอบ:

• (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 ของคุณเอง

️ความรู้ที่ครอบคลุม:

ฉันไม่มีประสบการณ์ในการพัฒนาส่วนหน้า ดังนั้นฉันจึงเรียนรู้จาก Baidu, Google หรืออ่านเอกสารระหว่างการฝึกฝน ข้อมูลต่อไปนี้ทั้งหมดปรากฏบนเว็บไซต์ของฉัน จัดเรียงตามเส้นทางการเรียนรู้ คุณสามารถใช้อ้างอิงได้

วิว

ฉันเรียนรู้ API แบบรวมโดยตรง ดังคำกล่าวที่ว่า เรียนรู้สิ่งใหม่ แต่ไม่ใช่สิ่งเก่า! ไลบรารีส่วนประกอบใช้องค์ประกอบบวกของอาลีบาบา

• [พื้นฐานของการตอบสนอง] ปฏิกิริยา (ฉันไม่ได้ใช้สิ่งนี้บ่อย ฉันอ้างอิงทุกอย่างโดยตรง), อ้างอิง (วัตถุที่ถูกอ้างอิงกลายเป็นการตอบสนอง), v-bind (ใช้กันทั่วไป), {{}}
• [พื้นฐานของไวยากรณ์] v-if (ใช้กันทั่วไป), v-for (ใช้กันทั่วไป), v-on (ใช้กันทั่วไป), v-model
• 【แอตทริบิวต์ที่คำนวณแล้ว】คำนวณแล้ว
• [การจัดองค์ประกอบ] อุปกรณ์ประกอบฉาก (ใช้กันทั่วไป), ช่อง (ชื่อ, วัด ใช้กันทั่วไป), การส่งคืนเหตุการณ์ [$emit] แอตทริบิวต์ที่โปร่งใส
• [การจัดการเส้นทาง] การกำหนดค่าพื้นฐานของ vue-router (เส้นทาง, การเปลี่ยนเส้นทาง, นามแฝง, ลูก, ส่วนประกอบ)
• 【แอนิเมชั่น】การเปลี่ยนแปลง กลุ่มการเปลี่ยนผ่าน
• [โหมดกลางคืน] หลักการคือการเพิ่มคลาส (มืด) ให้กับ html
• [การตรวจสอบการตอบสนอง] ดู

จาวาสคริปต์/ไทป์สคริปต์

• [ตัวแปร] var, let, const (ใช้กันทั่วไป)
• [พื้นฐานของวัตถุ] อาร์เรย์[], วัตถุ{} (ฉันใช้มันเป็นแผนที่) ทุกอย่างเป็นวัตถุ (ณ จุดนี้คุณจะเข้าใจว่าทำไมการอ้างอิงถึงต้องการค่าก่อนจึงจะสามารถใช้งานได้)
• [วิธีการ, การส่งพารามิเตอร์, การใช้ซ้ำ] การนำเข้า, ฟังก์ชัน (คุณสามารถเข้าใจหลักการคำนวณโดยการรวมทุกอย่างที่เป็นวัตถุ)

ซีเอสเอส/SCSS:

• 【สไตล์พื้นฐาน】
• 》》รูปแบบตัวอักษร: สี, ขนาดฟอนต์, ตระกูลฟอนต์ (ฟอนต์, ฉันคัดลอกของผู้อื่นโดยตรง)
• 》》สไตล์คอนเทนเนอร์: สีพื้นหลัง, รัศมีเส้นขอบ (มุมโค้งมน), กล่อง-เงา (เงาเส้นขอบ), เส้นขอบ (การวาดเส้นขอบ ฉันมักจะเปิดใช้งานเมื่อออกแบบเค้าโครง)
• [พื้นฐานเค้าโครง] การเติม (การปรับระยะห่างภายในคอนเทนเนอร์), ระยะขอบ (การปรับระยะทางภายนอกคอนเทนเนอร์), ความกว้าง/ความสูง (สามารถเติมได้ 100% โดยอัตโนมัติ ไม่เช่นนั้นจะน่าเกลียด), ความกว้างสูงสุด/ความสูงสูงสุด
• [รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ (เฟล็กซ์) สามารถทำให้เพจเข้ากันได้กับโทรศัพท์มือถือ] จอแสดงผล: flex, flex-direction, flex-wrap, justify-content, flex-grow (ใช้กันทั่วไป)
• [พื้นฐานของแอนิเมชั่น] การเปลี่ยนแปลง การแปลง คลาสหลอก (เช่น: โฮเวอร์)
• [ลำดับความสำคัญของสไตล์]!import (นิสัยที่ไม่ดีของฉัน: เมื่อมีข้อสงสัย ให้ !import)

HTML

ดูเหมือนว่าจะไม่มีจุดความรู้พิเศษ มีเพียงแท็กต่างๆ สำหรับความต้องการขั้นพื้นฐาน เพียงแค่ใช้ Baidu

• เพียงแค่สามารถใช้ div เพื่อแบ่งได้ และ div ที่มีแท็กและไวยากรณ์ก็สามารถแก้ปัญหาได้เกือบทุกอย่าง
• เคล็ดลับ! ป้ายวัดของ Vue ไม่ส่งผลต่อสไตล์!