Aturan pertama soal soal adalah jangan pernah mengerjakan soal soal!
Sudah ada banyak perselisihan tentang hal ini di Habré, dan kemudian saya memiliki kesempatan untuk mempelajari pelajaran ini di kulit saya sendiri. Saya mengirim solusi, tetapi tidak menerima jawaban. Bahkan negatif. Tidak ada. Tentu saja, semuanya dapat dikaitkan dengan krisis, bahwa lowongan itu tiba-tiba dibekukan (saya sering mendengar ini belakangan ini, tetapi lowongan yang sama terus menggantung). Tetap saja, kesopanan yang dangkal sudah lebih dari cukup. Kesimpulannya tidak ambigu: Anda perlu memeriksa dengan cermat keandalan lawan bicara sebelum menggigit TZ.
Namun demikian, saya sengaja mengambil langkah ini untuk menguji diri saya, untuk mendapatkan pengalaman, bahkan jika terjadi kegagalan dengan majikan. Artikelnya tidak akan tentang itu. Kesulitan dengan solusi sudah muncul pada tahap membaca pernyataan teknis. Terkadang Anda bahkan tidak tahu cara memulai tugas, dan pilihan yang Anda buat di awal akan memengaruhi semua tahap pengembangan.
Ada banyak tutorial tentang cara membuat seni tubuh online, jadi bagaimana saya akan berbeda? Pertama, mereka biasanya tidak dibuat sesuai dengan tugas teknis, yang berarti bahwa penulis "mengambil jalan pintas" dan umumnya tidak membatasi diri pada apa pun. Kedua, sangat jarang melihat penjelasan tentang mengapa satu atau lain jalan dipilih untuk memecahkan masalah. Ketiga, aplikasi saya adalah urutan besarnya lebih rumit daripada daftar tugas standar, lebih banyak lagi nanti.
Untuk berkenalan dengan tugas yang saya terima, saya bertanya di bawah spoiler:
Tugas teknis:
Gunakan Vue.js untuk mengimplementasikan aplikasi pencatatan SPA kecil.
Setiap catatan memiliki judul dan daftar tugas, lalu Todo. Setiap item Todo terdiri dari kotak centang dan tanda tangan teks yang terkait.
Aplikasi hanya terdiri dari 2 halaman.
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
, . . , , , , ( ) , , .. , .
:
Vue.js SPA . : Vue CLI .
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}, .