symbolMe

simbol_saya

Pengaturan proyek

 npm install

Kompilasi dan hot-reload untuk pengembangan

 npm run serve

Mengkompilasi dan mengecilkan untuk produksi

 npm run build

Lint dan memperbaiki file

 npm run lint

fitur

1. Antarmukanya relatif indah, dan Anda dapat menyesuaikan informasi resume Anda, termasuk informasi pribadi, pengalaman sekolah, pengalaman proyek, dan informasi keterampilan pribadi.
2. Informasi proyek disimpan dalam database mongodb, file besar disimpan menggunakan gltf, dan program layanan latar belakang dibangun dengan express. Alamat proyek: https://github.com/Longbao521/symbolMeServer
3. Proyek ini berisi beberapa animasi, termasuk perpustakaan animate.css dan animasi khusus untuk referensi Anda.
4. Proyek ini mendukung bahasa penurunan harga, mendukung fungsi edit pratinjau blog, dan mendukung fungsi unggah. Blog yang diunggah disimpan dalam database dan diperbarui secara real time di beranda blog Anda, memungkinkan semua orang mencatat apa yang telah mereka pelajari.
5. Mendukung Cesium, Anda dapat mengedit kode pengujian secara online dan menjalankannya
6. Proyek ini menggunakan beberapa alat yang biasa digunakan dalam proyek vue, seperti scaffolding vue-cli untuk membangun proyek, elemen-ui untuk membangun gaya komponen dasar, dll.
7. Proyek ini akan dipertahankan dan ditingkatkan, dan versi program mini (mpVue, alamat proyek: https://github.com/Longbao521/mpvue) dan versi desktop (Electron) akan diluncurkan Flutter dan kembangkan aplikasi lintas platform. Pantau terus
8. Kode proyek secara ketat mematuhi spesifikasi ESLint
9. Sebagian besar tata letak proyek mengadopsi tata letak fleksibel

tumpukan teknologi

Vue, Vue-CLI, Axios, LESS, Element-UI, Animate, ESLint

Masalah yang dihadapi

• Masalah dengan pemilih gaya tag di v-html Jika tag yang tertulis di template dapat menentukan gaya dalam cakupan gaya, tetapi tag di v-html tidak dapat menentukan gaya yang sesuai di area ini, ada beberapa solusi:
  • Hapus cakupan gaya dan tentukan gaya label di lembar gaya global. Hal ini tidak disarankan karena akan memengaruhi gaya elemen di komponen yang berbeda.
  • Gunakan pemilih dalam /deep/(LESS, SCSS) atau >>>(CSS).
  • Dalam siklus hidup yang diperbarui, js secara dinamis mengonfigurasi gaya
• Bagaimana cara mengikat fungsi yang berbeda ke setiap tombol di loop v-for? Mengapa kita tidak bisa menambahkan fungsi ke data?
  • Tambahkan fungsi perutean kelas dalam metode. Setiap elemen di v-for berisi bidang metode, yang menentukan fungsi yang akan dipicu. Saat ini, Anda dapat menentukan @click sebagai fungsi perutean, dan meneruskan bidang metode yang digunakan oleh fungsi perutean. Memicu fungsi yang sesuai untuk mewujudkan pengikatan antara lapisan Tampilan dan lapisan Model
• Tetapkan gaya untuk subkomponen di vue Ini sangat mirip dengan pertanyaan pertama. Saya kira cara vue menangani konten di v-html adalah dengan membuat sub-komponen secara dinamis. Prinsipnya sangat sederhana. Komponen induk tidak dapat mengubah gaya elemen di dalamnya sub-komponen. Ini adalah saat kita menggunakan Elemen -UI yang sering ditemui saat menggunakan perpustakaan pihak ketiga . Solusinya adalah sebagai berikut:
  • Hapus cakupan gaya dan tentukan gaya label di lembar gaya global. Hal ini tidak disarankan karena akan memengaruhi gaya elemen di komponen yang berbeda.
  • Gunakan pemilih dalam /deep/(LESS, SCSS) atau >>>(CSS).

Tampilan efek proyek:

Langkah selanjutnya

1. Tingkatkan fungsi khusus
2. Tambahkan modul fungsi yang sesuai
3. Tingkatkan verifikasi token
4. Meluncurkan versi program mini (mpvue), versi desktop (ELectron) dan lintas platform (Flutter)

Ubah catatan

• 1.0.1 Gunakan instruksi khusus untuk mencapai anti-guncangan pada tombol kirim
• 1.0.2 Mengimplementasikan fungsi pengeditan dan pembaruan label
• 1.1.0 Memodifikasi webpack, memperkenalkan Cesium, dan mengembangkan modul platform pengujian Cesium
• 1.1.1 Mendukung pengeditan online dan eksekusi kode,