ΠΊΠ°ΠΊ Π·Π°ΠΏΡΡΡΠΈΡΡ vue js ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°Π±ΠΎΡΡ Ρ Vue.js
Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π²Ρ, ΡΠΈΡΠ°Ρ ΡΡΠΈ ΡΡΡΠΎΠΊΠΈ, ΡΠΆΠ΅ ΡΠ»ΡΡΠ°Π»ΠΈ ΠΎ JavaScript-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Vue. ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π½ΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠ΅Π±Π΅ ΡΠΎ, Ρ ΡΠ΅Π³ΠΎ Π²Π°ΠΌ ΡΡΠΎΠΈΡ Π½Π°ΡΠ°ΡΡ, Π·Π½Π°ΡΠΈΡ β ΡΡΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π½Π°ΠΏΠΈΡΠ°Π½ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ Π²Π°Ρ. ΠΠ³ΠΎ Π°Π²ΡΠΎΡ Π³ΠΎΠ²ΠΎΡΠΈΡ, ΡΡΠΎ Ρ ΠΎΡΠ΅Ρ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ Π΅ΠΌΡ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΠΈΡΡΡ Vue. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ Π²ΡΠ΅ΠΌ ΠΆΠ΅Π»Π°ΡΡΠΈΠΌ 4 ΡΠΏΠΎΡΠΎΠ±Π° Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Vue.
Π ΠΊΠΎΠ½ΡΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ΅Π»ΡΠΉ ΠΊΡΡΡ ΠΏΠΎ Vue.js.
ΠΠ±Π·ΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°
ΠΠ±ΡΡΠ½ΠΎ Ρ ΡΡΠ°ΡΠ°ΡΡΡ Π½Π΅ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠΏΠΎΡΠΎΠ±Π°Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΈΡ ΠΈ ΡΠ΅Ρ ΠΆΠ΅ Π·Π°Π΄Π°Ρ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΎΡΠ²Π°ΠΈΠ²Π°ΡΡ Π½Π΅ΠΊΠΈΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ. ΠΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Vue β ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ, Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ β Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΎΡΠ½Π°ΡΡΠ½Π½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ. ΠΠ»Ρ Vue-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΈ ΡΠΎ ΠΈ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΈ Π½Π΅ ΠΏΡΠΈΠ±Π΅Π³Π°Ρ ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° HTML-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅Π³ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠΊΡΠΈΠΏΡΠ°. Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π½Π΅ Ρ ΠΎΡΠ΅ΡΡΡ Π·Π°Π±ΠΎΡΠΈΡΡΡΡ ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Ρ ΡΡΡΠ΅ΠΌΠΈΡΠ΅ΡΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΡΠ΅Π΅, Π±Π΅Π· Π»ΠΈΡΠ½ΠΈΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Vue. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ ΡΡΡΠ°ΡΠ΅Π³ΠΈΠΈ Π²Ρ Π½ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°Π»ΠΈΡΡ Π±Ρ, Π·Π΄Π΅ΡΡ Π²Ρ Π½Π°ΠΉΠ΄ΡΡΠ΅ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ Vue.
Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠ΅ΡΡΡΡΡ. Π ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΡΡΡΡΠ΅ Π²ΡΡ ΡΡΡ ΡΡΠ°ΡΡΡ β Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΠΎ ΡΠΎΠΌ, Π½Π° ΡΡΠΎ Π²Π°ΠΌ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Vue. ΠΠ°Π΄ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ³ΡΡΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠ½ΠΊΠΎΡΡΠΈ Vue, Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΡ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ ΠΈ Π²ΡΠΉΡΠΈ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ Vue.
Π‘ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ Vue
Π‘ΠΈΠ»Π° Vue, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π½ΠΎ ΡΡΠΎΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌ. ΠΠΎΠΌΠ°Π½Π΄Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Vue ΠΏΡΠΎΠ΄Π΅Π»Π°Π»Π° Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ°Π±ΠΎΡΡ, ΡΡΡΠ΅ΠΌΡΡΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ ΠΊΠ²Π°Π»ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π±ΡΡΡΡΠΎ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ. ΠΡΠ»ΠΈ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ HTML, CSS ΠΈ JavaScript β ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ Π² ΡΠ°Π³Π΅ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠΎΡΠ½ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Vue.
Π― ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Vue, ΡΡΠ΅Π΄ΠΈ ΡΡΡΡ Π²Π΅Π΄ΡΡΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ (ΡΡΠΎ β Angular, React ΠΈ Vue), ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΡΠ°ΠΌΡΠΌΠΈ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ Π²Ρ ΠΎΠ΄Π½ΡΠΌΠΈ Π±Π°ΡΡΠ΅ΡΠ°ΠΌΠΈ. ΠΡΠΎ ΡΠ°ΠΊ ΠΏΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ, Π½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π²ΡΡ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊ ΡΡΡΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌ Vue:
βΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΡΠ»ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ Vue, ΡΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠΊΠ°ΠΆΡΡ ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΡΠ»ΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΡ ΡΠ°ΠΉΡ Vue.js, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ, ΡΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠ°Π·Π±ΠΈΡΠ° Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ²:
βΠ‘ΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ
Π―, ΡΠ°Π±ΠΎΡΠ°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠΌ, ΡΡΠ²ΡΡΠ²ΡΡ ΡΠ΅Π±Ρ ΠΏΡΠΈΡΠ°ΡΡΠ½ΡΠΌ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π°ΠΌ. ΠΠ΄Π½ΠΎ ΠΈΠ· Π½ΠΈΡ β ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ Vue. ΠΠ³ΠΎ ΡΠ»Π΅Π½Ρ Π΄ΠΎΠ±ΡΠΎΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½Ρ, Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π½Ρ, ΠΎΠ½ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π³ΠΎΡΠΎΠ²Ρ ΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΌΡ, ΠΊΡΠΎ Π² Π½Π΅ΠΉ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Twitter-Π°ΠΊΠΊΠ°ΡΠ½ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅Π½ΠΎΠ² ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° Vue. Π’Π°ΠΊ Π²Π°ΠΌ Π»Π΅Π³ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ½ΡΡΡ ΡΠΎ, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ, ΠΈ ΡΠ·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΠΆΠΈΠ²ΡΡ. ΠΠΎΡ ΡΡΡΠ»ΠΊΠΈ:
βVue β ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ
ΠΡΠ»ΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° Vue.js, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΡΠ°ΠΌ Π΅Π³ΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ ΡΠ°ΠΊ: Β«ΠΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΉ JavaScript-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΒ». ΠΠ° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²ΡΠΌ Ρ ΠΎΠ΄ΠΎΠΌ, Π½ΠΎ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Π½ΠΈΠΊΠ½ΡΠ² Π² ΡΡΡΡ Vue, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»ΠΎΠ²Π° Β«ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠ΅Β». ΠΡΠΎ β Π½Π΅ΡΡΠΎ, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ»ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΡΡΠ°ΠΏΠ½ΠΎ; ΡΡΠΎ ΡΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ΅, ΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎ.
Π‘ΠΎΠ²ΡΠ΅ΠΌ ΡΠΊΠΎΡΠΎ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΠΎΡΡΠ°ΠΏΠ½ΠΎ Π²Π½Π΅Π΄ΡΡΡ Π² Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΡΠΆΠ΅ Π΅ΡΡΡ Π½Π΅ΠΊΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, ΡΠΎ Π²Ρ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠ½Π°ΡΡΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Vue. ΠΠ°ΡΠ°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΊΡΠΈΠΏΡΠ° Vue ΠΈ Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Vue CLI, ΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Vue, Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΌΠΈ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΡΠΎ ΡΡΠΎ β ΡΠΎΠΆΠ΅ Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΠΈ, ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π²ΡΠΎΠ΄Π΅ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ, ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΎΡΠ½Π°ΡΡΠΈΡΡ.
ΠΠ°ΠΊ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ, Vue β ΡΡΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅ HTML, CSS ΠΈ JavaScript, ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Vue. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈ ΠΏΡΠ°Π²Π΄Π° ΡΡΡΠ΅ΠΌΠΈΡΠ΅ΡΡ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎΠ³Π΄Π° ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΡΡΠΈΠΌ ΠΈ Π·Π°Π½ΡΡΡΡΡ.
ΠΠ°ΡΠΈΠ°Π½Ρ β1: ΡΠΊΡΠΈΠΏΡ Vue, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΡΠ½Π½ΡΠΉ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ. ΠΠ½ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΎΠ΄Π½Ρ Π²Π°ΠΆΠ½ΡΡ Π²Π΅ΡΡ. Π ΠΈΠΌΠ΅Π½Π½ΠΎ, ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ»ΠΈ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π΅ΡΡΠΈΡ Vue, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΡΠ»ΠΈ Π½Π΅ΠΊΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΡΠΎ ΠΊ Π½Π΅ΠΉ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ½-Π²Π΅ΡΡΠΈΡ ΡΠΊΡΠΈΠΏΡΠ°. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎΠ± ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΈΡΠ°ΡΡ Π·Π΄Π΅ΡΡ.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΊΡΠΈΠΏΡΠ°, Π½Π°ΠΌ, Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΡΠ½ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ Vue:
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ Vue ΠΈ ΡΠΎΠΎΠ±ΡΠΈΠΌ Π΅ΠΌΡ ΠΎ ΡΠΎΠΌ, ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΅ΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡΡΡ:
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΠ°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ . ΠΠ½ΠΈ Π±ΡΠ΄ΡΡ Ρ ΡΠ°Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΠΏΡΡΡΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠ° data :
Π‘Π΅ΠΉΡΠ°Ρ, ΠΊΠΎΠ³Π΄Π° Π΄Π°Π½Π½ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ, ΠΌΡ Π³ΠΎΡΠΎΠ²Ρ ΠΏΡΠΈΠ±Π΅Π³Π½ΡΡΡ ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌ Vue ΠΏΠΎ Π²ΡΠ²ΠΎΠ΄Ρ ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΡΡΡ , ΡΠ΄ΠΎΠ±Π½ΡΡ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΉ:
Π‘Π΅ΠΉΡΠ°Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·Π΄ΡΠ°Π²ΠΈΡΡ ΡΠ΅Π±Ρ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ²ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Vue.js-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΎΡΠΊΡΡΡΡ index.html Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎ Π² Π½ΡΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠ²Π΅ΡΡΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΊΡΡΠΏΠ½ΡΠΌΠΈ Π±ΡΠΊΠ²Π°ΠΌΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Β«Hello, Vue!Β». ΠΠΈΠΆΠ΅ ΡΡΠΎΠΉ Π½Π°Π΄ΠΏΠΈΡΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΡΡΡΠΎΠΊΠ°, Π²ΡΠ²ΠΎΠ΄ΡΡΠ°Ρ ΡΠ΅ΠΊΡΡΠΈΠ΅ Π΄Π°ΡΡ ΠΈ Π²ΡΠ΅ΠΌΡ. Π Ρ ΠΎΠ΄Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ΅Π³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ Visual Studio Code ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ Live Server.
ΠΡΠ»ΠΈ ΠΎΡΠΊΡΡΡΡ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎ Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, Π½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π½Π° Π½Π΅ΠΉ Π²ΡΠ΅ΠΌΡ Π±ΡΠ΄Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ΅ΠΊΡΠ½Π΄Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π½Π°ΠΌ Π½Π΅Ρ Π½ΡΠΆΠ΄Ρ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ DOM Π²ΡΡΡΠ½ΡΡ. Vue ΡΠ²ΡΠ·Π°Π» Π΄Π°Π½Π½ΡΠ΅ Ρ DOM. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΈ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΡΠΈΠ°Π½Ρ β2: Vue CLI
Π₯ΠΎΡΡ ΠΌΡ ΠΈ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ² ΡΠΊΡΠΈΠΏΡ Vue ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡΡ. ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠ΅ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (Single Page Application, SPA) ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Ρ ΠΎΡΠ΅ΡΡΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Vue, ΡΠΎΠ³Π΄Π° Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ±Π΅Π³Π½ΡΡΡ ΠΊ Vue CLI.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΠ· ΡΠ΅Ρ , ΠΊΡΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ Π»ΡΠ±ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, ΡΠΎΠ³Π΄Π° Π²Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΠΈΠΌΠ΅ΡΡΠΈΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ (Vue UI).
βΠ£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Vue CLI
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Vue CLI. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ β Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π·Π°Π²Π΅ΡΡΠΈΡΡ Node.js ΠΈ npm. ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π½ΡΡΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ Node.js ΠΈ npm β ΡΠ΄Π΅Π»ΠΈΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΠΎ, ΡΡΠΎΠ±Ρ Ρ Π½ΠΈΠΌΠΈ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π² Π½ΠΈΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ. ΠΠΎΡ ΠΊΠΎΠΌΠ°Π½Π΄Π°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Vue CLI:
Π‘ΠΏΠΈΡΠΎΠΊ ΠΊΠΎΠΌΠ°Π½Π΄, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ ΡΡΠΈΠ»ΠΈΡΠΎΠΉ vue
ΠΠΎΠΌΠ°Π½Π΄Π° create ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΈΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΠΎΠ΅ Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π‘Π΅ΠΉΡΠ°Ρ ΠΆΠ΅ Π½Π°ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΠ³Π»Π°ΡΠΈΡΡΡΡ Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ. ΠΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Vue CLI
Π’Π΅ΠΏΠ΅ΡΡ, Π² ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈΠ»ΠΈ Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ Π² Π²Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅, Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
ΠΠ½Π° Π·Π°ΠΏΡΡΡΠΈΡ ΡΠ΅ΡΠ²Π΅Ρ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π²ΡΠ΄Π°ΡΡ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΡΠΊΡΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π ΠΈΠΌΠ΅Π½Π½ΠΎ, ΡΡΠΎ http://localhost:8080/.
Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
Π’ΡΡ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Vue CLI Π»ΠΈΡΡ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΠ½ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ Ρ Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°Π» Π²Π°ΠΌ ΡΠΎ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Vue CLI ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½Ρ Π½Π°Π΄ΡΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΡΠ°ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΈ ΠΌΠΎΠ³ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎ ΡΠΎΡΡΡ Π½ΡΠΆΠ΄ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ°ΡΠΈΠ°Π½Ρ β3: Vue UI
ΠΠΌΠ΅ΡΡΠ΅ Ρ Vue CLI, Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Vue UI. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ Π·Π°ΠΏΡΡΡΠΈΡΡ β Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ:
Π Ρ ΠΎΠ΄Π΅ Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ°ΡΡΡ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ http://localhost:8000/dashboard.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Vue UI ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΡΠ΅ΠΌΠΈ ΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΡΡΠΎ ΠΈ ΠΏΡΠΎΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² Vue UI
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½Π°, Π·Π°ΠΏΡΡΡΠΈΡΡ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠΌΠΎ ΠΈΠ· Vue UI, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ Π² ΡΠ°Π·Π΄Π΅Π» Project tasks ΠΈ Π½Π°ΠΆΠ°Π² Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΠ°ΠΏΡΡΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Vue UI
ΠΠ°ΡΠΈΠ°Π½Ρ β4: CodeSandbox
Π₯ΠΎΡΡ Π²ΡΡΠ΅ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΈ Π½Π°ΠΌ Π΄ΠΎΡΡΠΈΡΡ ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅Π»ΠΈ, ΠΎΠ½ΠΈ ΡΡΠ΅Π±ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ ΡΡΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΈ Π²Ρ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π½Π΅ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ²ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΡΠ°ΠΊ β ΡΠΎΠ³Π΄Π° ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΡ Ρ Vue. ΠΠ½ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΡ ΡΡΠ΅Π΄ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ CodeSandbox.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Π½Π° CodeSandbox, Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π²ΠΎΠΉΡΠΈ Π² ΡΠΈΡΡΠ΅ΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ GitHub-Π°ΠΊΠΊΠ°ΡΠ½ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ Β«ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡΒ» (Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«sandboxΒ») ΠΈ Π½Π°ΠΉΡΠΈ Vue ΡΡΠ΅Π΄ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² (Π½Π° Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ΅ Popular templates ΠΈΠ»ΠΈ Client templates ).
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° Vue, Π² CodeSandbox
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ Vue-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠΈΡΡΠ½ΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ Π² Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π² ΡΠ΅Π½ΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΎΠΊΠ½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, Π° ΡΠΏΡΠ°Π²Π° β ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
Π Π°Π±ΠΎΡΠ° Π½Π°Π΄ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² CodeSandbox
ΠΡΠΊΡΠΎΠΉΡΠ΅ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΡΠ°ΠΉΠ» src/components/HelloWorld.vue ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠΎ ΠΆΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ ΡΠΆΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈΡΡ. Π Ρ ΠΎΠ΄Π΅ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΊΠΎΠΌΡ-ΡΠΎ Π΅Π³ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎ ΡΡΠΌ-ΡΠΎ ΠΏΠΎΡΠΎΠ²Π΅ΡΠΎΠ²Π°ΡΡΡΡ. CodeSandbox ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ.
Π Π°Π±ΠΎΡΠ° Π½Π°Π΄ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² CodeSandbox
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠ΅ΡΡΡΡΡ
ΠΠΎΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΌΠΎΠΈΡ Π»ΡΠ±ΠΈΠΌΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΏΠΎ Vue. ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΠΏΡΠΎΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ Π² Π΄Π΅Π»Π΅ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β Π²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΠ° Awesome Vue, ΠΏΠΎΡΠ΅ΡΠΈΠ² ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π°Ρ ΡΠΊΠΎΡΠΈΡΡΠ΅ΠΌΡ Vue. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ Vue. ΠΠΎΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠ³ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠΎΡ ΡΠ°ΠΉΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° Vue-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠΎΡ ΠΈ Π²ΠΎΡ β ΠΏΠΎΠ΄ΠΊΠ°ΡΡΡ ΠΏΠΎ Vue. ΠΠΎΡ β ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° Vue: VuePress, Nuxt, Gridsome.
Π§ΡΠΎ Π΄Π°Π»ΡΡΠ΅?
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΈΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ Π²Ρ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π° β Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π² Ρ ΠΎΡΠΎΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΡΠ²ΠΎΠΈ Π·Π½Π°Π½ΠΈΡ ΠΏΠΎ JavaScript. Π§Π΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ Π·Π½Π°Π½ΠΈΠΉ ΠΏΠΎ JS β ΡΠ΅ΠΌ Π»ΡΡΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΎΡΠΎ Π·Π½Π°Π΅ΡΠ΅ JavaScript β ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ Π»ΡΠ±ΡΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ ΠΈΠ»ΠΈ Ρ Π»ΡΠ±ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
Π― ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ» ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ Vue ΠΈΠ· ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. ΠΠΎ ΠΎ Π½ΡΠΌ ΡΡΠΎΠΈΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ ΡΠ½ΠΎΠ²Π°. Π― Π±Ρ, Π΅ΡΠ»ΠΈ Π±ΡΠ» Π±Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ, ΠΏΠΎΡΡΠ°ΡΠ°Π»ΡΡ Π±Ρ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΡΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ, ΡΠΈΡΠ°Π» Π±Ρ Π΅Π³ΠΎ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΡΠ²Π°Π». ΠΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ Ρ Π½Π΅ Π·Π°Π±ΡΠ²Π°Π» Π±Ρ ΠΈΡΠΏΡΡΡΠ²Π°ΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΌ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ. ΠΠ΅ Π·ΡΡ Π³ΠΎΠ²ΠΎΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΡΠ΅ β ΠΌΠ°ΡΡ ΡΡΠ΅Π½ΡΡ. ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ³ΡΠ°Π΅Ρ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ Π²Π°ΠΌ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ.
Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π±ΠΎΡΡ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Vue:
ΠΡΠΎΠ³ΠΈ
ΠΡΠ»ΠΈ Π²Ρ ΡΠ»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΠΌΠΎΠΈΠΌΠΈ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡΠΌΠΈ Π² Twitter, ΡΠΎ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ Ρ β Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π½Π°Ρ Vue. ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ . Π― ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Vue Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΡ, Π½ΠΎ ΠΈ Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠΎΡΠ΅ΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠΎΠ΄Π° ΠΏΡΠΈΡΡΠ½ΡΠΌ ΠΈ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π°Π½ΡΡΠΈΠ΅ΠΌ.
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ! ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ ΡΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ β ΠΏΡΠΎΡΠΈΠΌ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ»ΠΎ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CLI? ΠΡΠΎ ΡΡΠΈΠ»ΠΈΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈ ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ Vue CLI 3
Π‘ΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ
ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Vue CLI v3 ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Node.js 8.9+. ΠΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ v8.11.0+.
ΠΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ:
ΠΠ΅ΡΠ΅Π΄ Π½Π°ΡΠ°Π»ΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Vue CLI Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ Π²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ CLI. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° CLI Vue 3
Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Vue CLI v3, Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ CLI Vue 3 Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ²Π΅ΡΡΠΈ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠ΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρ vue:
Π ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ²:
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° Vue
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Vue CLI Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
example-vue-project β ΡΡΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ.
ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°ΡΠΈΠ°Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ Π΄Π²Π° ΠΏΠ»Π°Π³ΠΈΠ½Π°: Babel ΠΈ ESLint. Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΡΠ½ΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΠ· Π½Π°Π±ΠΎΡΠ° ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²:
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π² Vue CLI. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΏΠ°ΠΏΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
ΠΠ°ΡΠ΅ΠΌ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Π‘Π΅ΡΠ²Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΊΠΎΠ΄Π°. ΠΠΎΡΡΠΎΠΌΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΡΠ΅ΡΠ²Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²Π½ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡΡ Π΄Π°ΠΆΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ!
Π ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ±ΠΎΡΠΊΠΈ:
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ»ΡΠΆΠ±Π° CLI Vue?
Π‘Π»ΡΠΆΠ±Π° Vue CLI β ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ (@vue/cli-service), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π‘Π»ΡΠΆΠ±Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π°, Π½Π°ΡΡΡΠΎΠ΅Π½Π° ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². ΠΠ½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠΈΠΏΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Vue-ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, serve, build ΠΈ inspect.
ΠΡ ΡΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΠ΅Π½Π°ΡΠΈΠΈ serve ΠΈ build Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. Π‘ΠΊΡΠΈΠΏΡ inspect ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠ° Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ vue-cli-service. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΅Π³ΠΎ:
ΠΠ½Π°ΡΠΎΠΌΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°
ΠΡΠΎΠ΅ΠΊΡ Vue, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CLI, ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΎΡ Vue), CLI ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΠ»Ρ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ.
Π€Π°ΠΉΠ»Ρ ΠΈ ΠΏΠ°ΠΏΠΊΠΈ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Vue:
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΊΡΠΈΠ½ΡΠΎΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
ΠΠ»Π°Π³ΠΈΠ½Ρ CLI Vue
ΠΠ»Π°Π³ΠΈΠ½Ρ CLI β ΡΡΠΎ ΠΏΠ°ΠΊΠ΅ΡΡ npm, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ Vue-ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠΈΠ½Π°ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ» vue-cli-service Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π² ΡΠ°ΠΉΠ»Π΅ package.json.
ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° Vue CLI 3 β ΡΡΠΎ webpack ΠΈ Babel. ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ΅ΡΠ΅Π· ΠΏΠ»Π°Π³ΠΈΠ½Ρ.
ΠΡΡΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Vue. Π ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌΠΈ. ΠΠΌΠ΅Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ @vue/cli-plugin-, Π° Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ, Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ vue-cli-plugin-.
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Vue CLI 3:
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Vue
ΠΠ»Π°Π³ΠΈΠ½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½ΡΡΠ°Π»Π»ΠΈΡΡΡΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° vue add my-plugin.
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Vue
Π― ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ:
Π ΡΡΠΎ Π½Π°ΡΡΡΡ webpack?
ΠΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° Vue CLI Π°Π±ΡΡΡΠ°Π³ΠΈΡΡΠ΅ΡΡΡ Π² ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΡΡΡ Ρ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ webpack Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ CLI Vue 3
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«CreateΒ». ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π΅Π³ΠΎ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ, Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«+ Create a new project hereΒ».
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ ΠΏΠΎΠΏΠ°Π΄ΡΡΠ΅ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
ΠΠ²Π΅Π΄ΠΈΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«NextΒ». ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΏΠΎΠΏΠ°Π΄Π΅ΡΠ΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«PresetsΒ», Π³Π΄Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΎΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ°Π»Π΅Π΅ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«Create ProjectΒ». ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ ΠΏΠΎΠΏΠ°Π΄Π΅ΡΠ΅ Π² Π½ΠΎΠ²ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°ΡΠ΅ΠΌ Π² ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«CustomizeΒ».
Π‘Π»Π΅Π²Π° ΠΎΡ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ:
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Β«TasksΒ».
ΠΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β« Stop task Β».
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½ΠΎΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Vue CLI, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΅Π»ΡΠΉ ΡΡΠ΄ ΡΠ΄ΠΎΠ±Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ: ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΎΠ±ΡΠΈΡΠ½Π°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Vue.js.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΡΠ°Π²ΡΡΠ΅ Π²Π°ΡΠΈ ΠΌΠ½Π΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ. ΠΡ ΠΎΡΠ΅Π½Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΠΌ Π²Π°Ρ Π·Π° Π²Π°ΡΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ, ΠΎΡΠΊΠ»ΠΈΠΊΠΈ, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ, Π»Π°ΠΉΠΊΠΈ!
ΠΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (SPA) Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Vue.js
ΠΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ (SPA) ΠΈΠΌΠ΅ΡΡ ΠΌΠ½ΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠΊΠΎΡΠΎΡΡΡ, ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ Ρ ΠΎΡΠΎΡΠΈΠΉ UX, ΠΈ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. Π‘ΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°ΠΉΡΠΎΠ² SPA; Π²ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠΎΡΠ°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ SPA. ΠΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΡΠΆΠ΅ ΡΠΈΡΠ°Π»ΠΈ ΠΎ ΠΌΠΎΠ»ΠΎΠ΄ΠΎΠΌ ΠΈ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ Vue.js. ΠΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²Π°ΠΌ Π³Π»ΡΠ±ΠΆΠ΅ ΠΏΠΎΠ³ΡΡΠ·ΠΈΡΡΡΡ Π² Vue ΠΈ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΠΏΡΠΎΡΡΡΠΌ SPA.
ΠΡ Π½Π°ΠΏΠΈΡΠ΅ΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ-ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°. ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ. Π ΡΠ°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ, Π²ΡΡ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π±Π΅Π· ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ²ΡΠΈΡΡ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² Vue, ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΡΡΡ ΠΈ ΡΠ°Π·Π±Π΅ΡΡΡΠ΅ΡΡ Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ Vue β ΠΎΠ΄Π½ΠΎΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ.
ΠΡΠΊΠ΅Π½Π΄
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ Π½Π° Vue. Π Π°Π·ΠΌΡΡΠ»ΡΡΡ ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ REST Π±ΡΠΊΠ΅Π½Π΄Π° ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ΅ΡΠ²ΠΈΡ jsonplaceholder.typicode.com ΠΏΡΠ΅Π΄ΠΎΡΡΠΎΠ²Π»ΡΡΡΠΈΠΉ Π·Π°Π³Π»ΡΡΠΊΡ Π² Π²ΠΈΠ΄Π΅ REST API.
Π€ΡΠΎΠ½ΡΠ΅Π½Π΄
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ
ΠΠ°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Vue ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎ Π΅ΡΡ ΠΏΡΠΎΡΠ΅. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΏΡΠΎΠ΅ΠΊΡ vue-awesome, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π½Π° Π²ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ ΠΆΠΈΠ·Π½ΠΈ.
Vue-cli
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Vue-cli. Π’Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Vue, ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΠ°Π±Π»ΠΎΠ½Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅.
ΠΡΠ°ΠΊ, Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ vue-cli Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ°:
ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΎΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ; Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ webpack-simple.
ΠΠ°Π»Π΅Π΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ Π² ΠΏΠ°ΠΏΠΊΡ vue-spa ΠΈ Π·Π°ΠΏΡΡΡΠΈΠΌ npm install Π² ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅. ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²ΡΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΏΡΡΡΠΈΡΡ Π½Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
ΠΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΏΡΡΡΠΈΡ Π½Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Π½Π° Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ dev-ΡΠ΅ΡΠ²Π΅ΡΠ΅ webpack. Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π°ΡΠ΅ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Vue. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΎΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±Ρ Π½Π°ΠΌ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ, ΠΈ Π³ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ΅Π³ΠΎ-ΡΠΎ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠ°Π±ΠΎΡΡ, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΡΠ½Π°ΡΠ°Π»Π° ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΠΎ ΡΡΡΡΠΊΡΡΡΠΎΠΉ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π°.
Π¨Π°Π±Π»ΠΎΠ½ webpack-simple
ΠΠ½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΎΠ½ webpack-simple ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΡΠΊΡΡΡΡ:
Π€Π°ΠΉΠ» index.html ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠΎΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML Ρ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ βappβ Π² body. ΠΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΌΠ΅Π½ΡΠ½ Π½Π° DOM, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ vue. ΠΠΎ ΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅ ΡΡΠ³ body Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ΄Π½ΠΎΡΠ°ΠΉΠ»ΠΎΠ²ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π»ΡΡΡΠ΅.
ΠΠΎΠ΄ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ
ΠΎΡΡΠΈΡΡΡ Π½Π° github.com. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ Π²Π΅ΡΠΊΡ ΠΏΠΎ Π½ΠΎΠΌΠ΅ΡΡ ΡΠ°Π³Π° ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠ»Π΅Π΄ΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°Π³ Π·Π° ΡΠ°Π³ΠΎΠΌ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
Π Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅ΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π² Π½Π°ΡΠ΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π΄Π°Π½Π½ΡΠ΅ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Ρ Π²ΡΠ±ΡΠ°Π» Axios β ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ HTTP-ΠΊΠ»ΠΈΠ΅Π½Ρ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π΄Π»Ρ Π²Π°Ρ ΡΠΏΠΎΡΠΎΠ±, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Vue-ΡΠ΅ΡΡΡΡ ΠΈΠ»ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ Π²ΡΠ±ΠΎΡΠΊΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ jQuery Ajax.
Π¨Π°Π³ 2
ΠΠ°ΡΠ΅ΠΌ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ Π΅Π³ΠΎ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ App ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ getAllPosts() ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π΄Π΅Π»Π°ΡΡ Π·Π°ΠΏΡΠΎΡ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ posts. ΠΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ Π² Ρ ΡΠΊΠ΅ created(), ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ° Vue ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊ Π΄Π°Π½Π½ΡΠΌ.
Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΠΌ Π²ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΌΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π·Π°ΠΏΠΈΡΠ΅ΠΉ, Π½ΠΎ ΠΏΠΎΠΊΠ° ΠΌΡ Π΅ΡΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΡΡ ΡΠ°ΠΌΠΈ Π·Π°ΠΏΠΈΡΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΠΎΡΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ±Ρ ΠΊΠ°ΠΆΠ΄Π°Ρ Π·Π°ΠΏΠΈΡΡ Π±ΡΠ»Π° Π΄ΠΎΡΡΡΠΏΠ½Π° ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ Π°Π΄ΡΠ΅ΡΡ.
Π¨Π°Π³ 3
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Vue Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ vue-router. ΠΠ°ΠΊ ΡΠΆΠ΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠΎΡΡΠΈΠ½Π³ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ:
ΠΠ»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΡΡΠΈΠ½Π³Π° Π²Π΅ΡΠ½ΡΠΌΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ main.js. ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΡΡΠΈΠ½Π³Π° ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΡ Π² Π½Π°Ρ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ Vue.
Π Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ ΡΠΎΡΡΠΈΠ½Π³Π° ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΡ ΠΏΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌΡ ΠΏΡΡΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Post.vue Π±ΡΠ΄Π΅Ρ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π·Π° ΠΎΡΡΠΈΡΠΎΠ²ΠΊΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ°, Π½Π°ΠΌ Π½Π΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΏΠΎΡΡΡ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΡΡ.
ΠΡΡΠ°Π»ΡΡ Π·Π°ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π³. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π·Π°ΠΏΠΈΡΠΈ ΠΏΠΎΡΡΠ°.
Π¨Π°Π³ 4
ΠΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ ΠΊ ΡΠ°ΠΉΠ»Ρ Post.vue, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ°Π±Π»ΠΎΠ½:
ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ° Vue Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΠ΄Π΅ΡΡ Π²ΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ ΠΏΠΎΡΡΠΎΠ². ΠΠ±ΡΡΠ²ΠΈΠΌ ΠΎΠΏΡΠΈΡ props Ρ ΠΌΠ΅Π½ΡΡΡΠΈΠΌΡΡ id, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π½ΠΎΠΌΠ΅Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΡΡΠ°. ΠΠ°Π»Π΅Π΅, ΠΎΠ±ΡΡΠ²ΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π°Π½Π½ΡΡ , ΠΊΠ°ΠΊ ΡΠΆΠ΅ Π΄Π΅Π»Π°Π»ΠΈ Π² App.vue:
ΠΠ°ΡΠ΅ΠΌ ΠΎΠΏΠΈΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ getPost(), ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ Π·Π°ΠΏΠΈΡΡ ΠΏΠΎΡΡΠ° ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΈ Π²ΡΠ·ΠΎΠ²Π΅ΠΌ Π΅Π³ΠΎ Π² Ρ ΡΠΊΠ΅ created().
ΠΠΎΡΡΠΈ Π³ΠΎΡΠΎΠ²ΠΎ. ΠΡΠ»ΠΈ ΠΌΡ Π·Π°ΠΏΡΡΡΠΈΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΉΡΠ°Ρ, ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ, Ρ
ΠΎΡΡ URL-Π°Π΄ΡΠ΅Ρ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΠΎΡΡΠΈΡΠΎΠ²Π°Π½ ΠΏΠ΅ΡΠ²ΡΠΌ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΡΠ°Π·Π½ΡΡ
ΠΏΠΎΡΡΠΎΠ² Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΈ Vue Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ·-Π·Π° Π»ΠΈΡΠ½Π΅ΠΉ ΡΡΠ°ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ², Π° ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Ρ
ΡΠΊΠΈ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π½Π΅ Π±ΡΠ΄ΡΡ Π²ΡΠ·Π²Π°Π½Ρ.
Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ, Π½Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ watcher Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° $route.
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²Π΅ΡΡΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠ΄Π°ΠΊΡΠΈΠ½Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ npm run build Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ.










