|
2 | 2 |
|
3 | 3 | Vue νν 리μΌμ μ¨ κ²μ νμν©λλ€.
|
4 | 4 |
|
5 |
| -μ΄ νν 리μΌμ λͺ©νλ λΈλΌμ°μ μμ λΉ λ₯΄κ³ μ½κ² Vue μ¬μ© κ²½νμ μ 곡νλ κ²μ
λλ€. |
6 |
| -ν¬κ΄μ μΈ κ²μ λͺ©νλ‘ νμ§ μμΌλ―λ‘ κ³μ μ§ννκΈ° μ μ λͺ¨λ κ²μ μ΄ν΄ν νμκ° μμ΅λλ€. |
7 |
| -κ·Έλ¬λ μλ£ν νμλ κ° μ£Όμ μ λν΄ μμΈν μ€λͺ
νλ <a target="_blank" href="/guide/introduction.html">κ°μ΄λ</a>λ₯Ό μ½μ΄λ΄
μλ€. |
| 5 | +μ΄ νν 리μΌμ λͺ©νλ λΈλΌμ°μ μμ λΉ λ₯΄κ³ μ½κ² Vue μ¬μ© κ²½νμ μ 곡νλ κ²μ
λλ€. ν¬κ΄μ μΈ κ²μ λͺ©νλ‘ νμ§ μμΌλ―λ‘ κ³μ μ§ννκΈ° μ μ λͺ¨λ κ²μ μ΄ν΄ν νμκ° μμ΅λλ€. κ·Έλ¬λ μλ£ν νμλ κ° μ£Όμ μ λν΄ μμΈν μ€λͺ
νλ <a target="_blank" href="/guide/introduction.html">κ°μ΄λ</a>λ₯Ό μ½μ΄λ΄
μλ€. |
8 | 6 |
|
9 | 7 | ## μ μ 쑰건 {#prerequisites}
|
10 | 8 |
|
11 |
| -μ΄ νν 리μΌμμλ HTML, CSS λ° JavaScriptμ λν κΈ°λ³Έμ μΈ μ§μμ΄ μλ€κ³ κ°μ ν©λλ€. |
12 |
| -νλ‘ νΈμλ κ°λ°μ μ²μνλ κ²½μ°, 첫 λ²μ§Έ λ¨κ³λ‘ νλ μμν¬λ‘ λ°λ‘ λ°μ΄λλ κ²μ΄ μ’μ μκ°μ΄ μλ μ μμ΅λλ€. |
13 |
| -κΈ°μ΄λ₯Ό κ°μΆ λ€μ λ€μ λμμ€μΈμ! |
14 |
| -λ€λ₯Έ νλ μμν¬λ₯Ό μ¬μ©ν΄λ³Έ κ²½νμ΄ λμμ΄ λ μ μμ§λ§ νμλ μλλλ€. |
| 9 | +μ΄ νν 리μΌμμλ HTML, CSS λ° JavaScriptμ λν κΈ°λ³Έμ μΈ μ§μμ΄ μλ€κ³ κ°μ ν©λλ€. νλ‘ νΈμλ κ°λ°μ μ²μνλ κ²½μ°, 첫 λ²μ§Έ λ¨κ³λ‘ νλ μμν¬λ‘ λ°λ‘ λ°μ΄λλ κ²μ΄ μ’μ μκ°μ΄ μλ μ μμ΅λλ€. κΈ°μ΄λ₯Ό κ°μΆ λ€μ λ€μ λμμ€μΈμ! λ€λ₯Έ νλ μμν¬λ₯Ό μ¬μ©ν΄λ³Έ κ²½νμ΄ λμμ΄ λ μ μμ§λ§ νμλ μλλλ€. |
15 | 10 |
|
16 | 11 | ## μ΄ νν 리μΌμ μ¬μ©νλ λ°©λ² {#how-to-use-this-tutorial}
|
17 | 12 |
|
18 |
| -μ€λ₯Έμͺ½μμ μ½λλ₯Ό νΈμ§νκ³ μ¦μ μ
λ°μ΄νΈλ κ²°κ³Όλ¬Όμ λ³Ό μ μμ΅λλ€. |
19 |
| -κ° λ¨κ³λ Vueμ ν΅μ¬ κΈ°λ₯μ μκ°νλ©°, λ°λͺ¨κ° μλνλλ‘ μ½λλ₯Ό μμ±ν΄μΌ ν©λλ€. |
20 |
| -λ§νλ©΄ μλνλ μ½λλ₯Ό 보μ¬μ£Όλ "보μ¬μ€!" λ²νΌμ΄ νμλ©λλ€. |
21 |
| -νμ§λ§ κ·Έκ²μ λ무 μμ‘΄νμ§ λ§μλ€. |
22 |
| -μ€μ€λ‘ μμλ΄λ©΄ λ 빨리 λ°°μΈ μ μμ΅λλ€. |
| 13 | +μ€λ₯Έμͺ½μμ μ½λλ₯Ό νΈμ§νκ³ μ¦μ μ
λ°μ΄νΈλ κ²°κ³Όλ¬Όμ λ³Ό μ μμ΅λλ€. κ° λ¨κ³λ Vueμ ν΅μ¬ κΈ°λ₯μ μκ°νλ©°, λ°λͺ¨κ° μλνλλ‘ μ½λλ₯Ό μμ±ν΄μΌ ν©λλ€. λ§νλ©΄ μλνλ μ½λλ₯Ό 보μ¬μ£Όλ "보μ¬μ€!" λ²νΌμ΄ νμλ©λλ€. νμ§λ§ κ·Έκ²μ λ무 μμ‘΄νμ§ λ§μλ€. μ€μ€λ‘ μμλ΄λ©΄ λ 빨리 λ°°μΈ μ μμ΅λλ€. |
23 | 14 |
|
24 |
| -Vue 2 λλ λ€λ₯Έ νλ μμν¬μμ μ¨ μλ ¨λ κ°λ°μλΌλ©΄ μ΄ νν 리μΌμ μ΅λν νμ©νκΈ° μν΄ μ‘°μ ν μ μλ λͺ κ°μ§ μ€μ μ΄ μμ΅λλ€. |
25 |
| -μ΄λ³΄μλΌλ©΄ κΈ°λ³Έκ°μ μ¬μ©νλ κ²μ΄ μ’μ΅λλ€. |
| 15 | +Vue 2 λλ λ€λ₯Έ νλ μμν¬μμ μ¨ μλ ¨λ κ°λ°μλΌλ©΄ μ΄ νν 리μΌμ μ΅λν νμ©νκΈ° μν΄ μ‘°μ ν μ μλ λͺ κ°μ§ μ€μ μ΄ μμ΅λλ€. μ΄λ³΄μλΌλ©΄ κΈ°λ³Έκ°μ μ¬μ©νλ κ²μ΄ μ’μ΅λλ€. |
26 | 16 |
|
27 | 17 | <details>
|
28 | 18 | <summary>νν λ¦¬μΌ μ€μ μΈλΆ μ¬ν</summary>
|
29 | 19 |
|
30 |
| -- Vueλ μ΅μ
APIμ μ»΄ν¬μ§μ
APIμ λ κ°μ§ API μ€νμΌμ μ 곡ν©λλ€. |
31 |
| - μ΄ νν 리μΌμ λ μ€νμΌ λͺ¨λμμ μλνλλ‘ μ€κ³λμμ΅λλ€. |
32 |
| - μλ¨μ API μ€νμΌ μ€μ μ€μμΉλ₯Ό μ¬μ©νμ¬ μνλ μ€νμΌμ μ νν μ μμ΅λλ€. |
33 |
| - <a target="_blank" href="/guide/introduction.html#api-styles">API μ€νμΌμ λν΄ μμΈν μμ보기</a> |
| 20 | +- Vueλ μ΅μ
APIμ μ»΄ν¬μ§μ
APIμ λ κ°μ§ API μ€νμΌμ μ 곡ν©λλ€. μ΄ νν 리μΌμ λ μ€νμΌ λͺ¨λμμ μλνλλ‘ μ€κ³λμμ΅λλ€. μλ¨μ API μ€νμΌ μ€μ μ€μμΉλ₯Ό μ¬μ©νμ¬ μνλ μ€νμΌμ μ νν μ μμ΅λλ€. <a target="_blank" href="/guide/introduction.html#api-styles">API μ€νμΌμ λν΄ μμΈν μμ보기</a> |
34 | 21 |
|
35 |
| -- SFC λλ HTML λͺ¨λλ‘ μ νν μλ μμ΅λλ€. |
36 |
| - μ μλ λλΆλΆμ κ°λ°μκ° λΉλ κ³Όμ μμ Vueλ₯Ό μ¬μ©ν λ μ¬μ©νλ <a target="_blank" href="/guide/introduction.html#single-file-components">μ±κΈ νμΌ μ»΄ν¬λνΈ</a>(SFC) νμμ μ½λ μμ λ₯Ό 보μ¬μ€λλ€. |
37 |
| - HTML λͺ¨λλ λΉλ κ³Όμ μμ΄ μ¬μ©λ²μ 보μ¬μ€λλ€. |
| 22 | +- SFC λλ HTML λͺ¨λλ‘ μ νν μλ μμ΅λλ€. μ μλ λλΆλΆμ κ°λ°μκ° λΉλ κ³Όμ μμ Vueλ₯Ό μ¬μ©ν λ μ¬μ©νλ <a target="_blank" href="/guide/introduction.html#single-file-components">μ±κΈ νμΌ μ»΄ν¬λνΈ</a>(SFC) νμμ μ½λ μμ λ₯Ό 보μ¬μ€λλ€. HTML λͺ¨λλ λΉλ κ³Όμ μμ΄ μ¬μ©λ²μ 보μ¬μ€λλ€. |
| 23 | + |
| 24 | +<div class="html"> |
| 25 | + |
| 26 | +:::tip |
| 27 | +μ체 μ ν리μΌμ΄μ
μμ λΉλ λ¨κ³ μμ΄ HTML λͺ¨λλ₯Ό μ¬μ©νλ €λ κ²½μ°, λ€μ μ€ νλλ₯Ό λ³κ²½νμ¬ μν¬νΈνμΈμ: |
| 28 | + |
| 29 | +```js |
| 30 | +import { ... } from 'vue/dist/vue.esm-bundler.js' |
| 31 | +``` |
| 32 | + |
| 33 | +μ€ν¬λ¦½νΈ λ΄λΆμμ, λλ λΉλ λꡬλ₯Ό ꡬμ±νμ¬ `vue`λ₯Ό μ μ ν ν΄μνλλ‘ ν©λλ€. [Vite](https://vitejs.dev/)μ λν μν ꡬμ±: |
| 34 | + |
| 35 | +```js |
| 36 | +// vite.config.js |
| 37 | +export default { |
| 38 | + resolve: { |
| 39 | + alias: { |
| 40 | + vue: 'vue/dist/vue.esm-bundler.js' |
| 41 | + } |
| 42 | + } |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +μμΈν λ΄μ©μ [λꡬ κ°μ΄λμ ν΄λΉ μΉμ
](/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation)μ μ°Έμ‘°νμΈμ. |
| 47 | +::: |
| 48 | + |
| 49 | +</div> |
38 | 50 |
|
39 | 51 | </details>
|
40 | 52 |
|
41 |
| -μ€λΉ λλμ? |
42 |
| -"λ€μ"μ ν΄λ¦νμ¬ μμν©μλ€. |
| 53 | +μ€λΉ λλμ? "λ€μ"μ ν΄λ¦νμ¬ μμν©μλ€. |
0 commit comments