HyrKGsWebsite

Pendahuluan Perkenalkan

Proyek pembelajaran berbasis nol front-end pribadi saya, pembelajaran berbasis tugas! Diperbarui dari waktu ke waktu, biasanya saya ada pekerjaan dan belajar yang harus dilakukan.

☞Pratinjau: http://hyrkg.cn

Selamat datang di pojok kanan atas ↗️ BINTANG proyek saya, mari kita belajar dan membuat kemajuan bersama!

? Daftar Rencanaku:

• Bagian belakang musim semi
• Masuk ke sistem (diharapkan menggunakan oauth2)
  • Penyimpanan lokal & Penyimpanan sesi
• Sematkan VitePress ke situs web saya (tampaknya sulit)
• Rencana besar! ?Meja bundar
  • Antarmuka ujung depan
  • Tautan panjang, mungkin WebSocket?
• vuex, saya rasa masih perlu mempelajarinya terlebih dahulu.

? Selesai! Daftar yang Diperiksa:

• (css) Jadikan antarmuka sangat kompatibel dengan mode malam
• (vue-TransitionGroup) Biarkan taman bermain saya memiliki animasi yang keren
• (vue, js) memungkinkan komponen ditambahkan atau dihapus tanpa batas. Daftar memuat komponen alih-alih menulis langsung ke html!
• (vue, css) Komponen wadah fleksibel saya sendiri!
• ?Betapa menyenangkan memiliki halaman yang didedikasikan untuk belajar dan bermain. ?Taman bermain telah lahir!
• (vue-router) Beranda pribadi tidak memerlukan bilah navigasi dan menginginkan efek satu halaman. Gunakan anak-anak di rute untuk mengimplementasikan fungsi halaman tunggal dan halaman umum
• (vue-router) Terapkan fungsi navigasi dan buat bilah navigasi berguna!
• (vue, js) Coba tambahkan elemen (daftar responsif, properti terhitung, implementasi komponen mendengarkan) dengan mengklik tombol. Sekarang dipindahkan ke?taman bermain
• (vue) Buatlah komponen VUE kartu saya!
• (css) Optimalkan efek animasi kartu, ia akan melayang ketika mouse diletakkan di atasnya!
• (css) Ubah bilah navigasi elemen-plus menjadi milik Anda!
• (css) Buat sendiri melenturkan (Pada awalnya, ini sebenarnya grid, tapi saya menemukannya kemudian) Gaya
• (vue) Logo kompatibel dengan mode malam
• (nginx) diunggah ke server saya!
• Gunakan vite+vue+element-ui(element-plus-vite-starter) untuk membangun proyek vue Anda sendiri

?️ Pengetahuan yang tercakup:

Saya tidak memiliki pengalaman pengembangan front-end, jadi saya belajar dari Baidu, Google, atau membaca dokumen selama latihan. Berikut ini semua ada di website saya, diurutkan berdasarkan jalur pembelajaran, Anda dapat merujuknya untuk referensi.

VUE

Saya mempelajari API gabungan secara langsung. Seperti kata pepatah, pelajari yang baru, bukan yang lama! Pustaka komponen menggunakan elemen-plus Alibaba.

• [Dasar-dasar daya tanggap] reaktif (saya jarang menggunakan ini, saya mereferensikan semuanya secara langsung), ref (objek yang direferensikan menjadi responsif), v-bind (biasa digunakan), {{}}
• [Dasar tata bahasa] v-if (umum digunakan), v-for (umum digunakan), v-on (umum digunakan), v-model
• 【Atribut yang dihitung】 dihitung
• Alat peraga [Komponentisasi] (umum digunakan), slot (nama, candi. Umum digunakan), pengembalian acara [$emit], atribut transparan
• [Manajemen Perutean] Konfigurasi dasar vue-router (jalur, pengalihan, alias, turunan, komponen)
• 【Animasi】Transisi, Grup Transisi
• [Mode Malam] Prinsipnya adalah menambahkan kelas (gelap) ke html
• [Pemantauan responsif] jam tangan

JavaScript/Skrip Ketik

• [Variabel] var, let, const (umum digunakan)
• [Dasar-dasar objek] array[], objek{} (saya menggunakannya sebagai peta), semuanya adalah objek (pada titik ini Anda akan memahami mengapa ref memerlukan nilai sebelum dapat digunakan)
• [Metode, penerusan parameter, penggunaan kembali] impor, fungsi (Anda dapat memahami prinsip penghitungan dengan menggabungkan bahwa semuanya adalah objek)

CSS/SCSS:

• 【Dasar-Dasar Gaya】
• 》》Gaya font: warna, ukuran font, font-family (font, saya langsung menyalin milik orang lain)
• 》》Gaya wadah: warna latar, radius batas (sudut membulat), bayangan kotak (bayangan batas), batas (gambar batas, biasanya saya aktifkan saat mendesain tata letak)
• [Dasar-dasar tata letak] padding (penyesuaian jarak di dalam wadah), margin (penyesuaian jarak di luar wadah), lebar/tinggi (100% dapat terisi otomatis, jika tidak maka akan jelek), lebar-maks/tinggi-maks
• [Tata letak responsif (fleksibel) dapat membuat halaman kompatibel dengan ponsel] tampilan: flex, flex-direction, flex-wrap, justify-content, flex-grow (umum digunakan)
• [Dasar-dasar animasi] transisi, transformasi, kelas semu (seperti: hover)
• [Prioritas gaya]!import (Kebiasaan buruk saya: jika ragu, cukup !import)

HTML

Sepertinya tidak ada gunanya ilmu khusus, hanya berbagai tag. Untuk kebutuhan dasar, gunakan saja Baidu.

• Cukup gunakan div untuk membagi, dan div dengan tag dan sintaks pada dasarnya dapat menyelesaikan banyak hal.
• Kiat! Tag kuil Vue tidak mempengaruhi gaya!