{"id":11347,"date":"2026-01-28T11:36:57","date_gmt":"2026-01-28T02:36:57","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11347"},"modified":"2026-01-28T11:57:28","modified_gmt":"2026-01-28T02:57:28","slug":"vue-js-vuejs-3-%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0-%ec%84%a4%ec%b9%98%eb%b6%80%ed%84%b0-hello-world%ea%b9%8c%ec%a7%80","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11347","title":{"rendered":"[Vue.js] VueJS 3 \uc2dc\uc791\ud558\uae30: \uc124\uce58\ubd80\ud130 Hello World\uae4c\uc9c0"},"content":{"rendered":"<h1>[Vue.js] VueJS 3 \uc2dc\uc791\ud558\uae30: \uc124\uce58\ubd80\ud130 Hello World\uae4c\uc9c0<\/h1>\n<h2>Node.js \uc124\uce58<\/h2>\n<p><a href=\"https:\/\/nodejs.org\/ko\">\uc5ec\uae30<\/a> \uc5d0\uc11c Node.js \ucd5c\uc2e0\ubc84\uc804\uc744 \ub2e4\uc6b4\ubc1b\uc544 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-bash\"># \uc124\uce58\ud655\uc778\nnode -v\nv22.16.0\n\nnpm -v\n10.9.2<\/code><\/pre>\n<h2>VSCode \ubc0f \ud655\uc7a5 \ud50c\ub7ec\uadf8\uc778 \uc124\uc815<\/h2>\n<ul>\n<li>VSCode \uc124\uce58<\/li>\n<li>Vue (Official) \ud655\uc7a5 \uc124\uce58<\/li>\n<\/ul>\n<h2>Vue 3 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h2>\n<pre><code class=\"language-bash\">npm create vue@latest<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2026\/01\/image-1769568568699.png\" alt=\"file\" \/><\/p>\n<pre><code class=\"language-bash\">cd hellovue\nnpm install<\/code><\/pre>\n<h2>Hello World<\/h2>\n<p>src\/App.vue \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-bash\">&lt;template&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;h1&gt;{{ message }}&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\n\n\/\/ \ubc18\uc751\ud615 \ub370\uc774\ud130 \uc815\uc758\nconst message = ref(&#039;Hello, World!&#039;)\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  font-family: Arial, sans-serif;\n}\nh1 {\n  color: #42b883; \/* Vue \uacf5\uc2dd \ub85c\uace0 \uc0c9\uc0c1 *\/\n  font-size: 3rem;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589<\/h2>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c <a href=\"http:\/\/localhost:5173\/\">http:\/\/localhost:5173\/<\/a> \uc744 \uc5f4\uc5b4 \uc2e4\ud589\ub41c \ud654\uba74\uc744 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[Vue.js] VueJS 3 \uc2dc\uc791\ud558\uae30: \uc124\uce58\ubd80\ud130 Hello World\uae4c\uc9c0 Node.js \uc124\uce58 \uc5ec\uae30 \uc5d0\uc11c Node.js \ucd5c\uc2e0\ubc84\uc804\uc744 \ub2e4\uc6b4\ubc1b\uc544 \uc124\uce58\ud569\ub2c8\ub2e4. # \uc124\uce58\ud655\uc778 node -v v22.16.0 npm -v 10.9.2 VSCode \ubc0f \ud655\uc7a5 \ud50c\ub7ec\uadf8\uc778 \uc124\uc815 VSCode \uc124\uce58 Vue (Official) \ud655\uc7a5 \uc124\uce58 Vue 3 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 npm create vue@latest cd hellovue npm install Hello World src\/App.vue \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4. &lt;template&gt; &lt;div\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11347\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-11347","post","type-post","status-publish","format-standard","hentry","category-language"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11347"}],"version-history":[{"count":2,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11347\/revisions"}],"predecessor-version":[{"id":11351,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11347\/revisions\/11351"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}