<div id="readability-page-1" class="page"><article id="post-11347">
				

							<div>
												<h2>[Vue.js] VueJS 3 시작하기: 설치부터 Hello World까지</h2>
<h2>Node.js 설치</h2>
<p><a href="https://nodejs.org/ko">여기</a> 에서 Node.js 최신버전을 다운받아 설치합니다.</p>
<pre><code># 설치확인
node -v
v22.16.0

npm -v
10.9.2</code></pre>
<h2>VSCode 및 확장 플러그인 설정</h2>
<ul>
<li>VSCode 설치</li>
<li>Vue (Official) 확장 설치</li>
</ul>
<h2>Vue 3 프로젝트 생성</h2>
<pre><code>npm create vue@latest</code></pre>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2026/01/image-1769568568699.png" alt="file"></p>
<pre><code>cd hellovue
npm install</code></pre>

<p>src/App.vue 파일을 생성하고 아래 코드를 입력합니다.</p>
<pre><code>&lt;template&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;{{ message }}&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'

// 반응형 데이터 정의
const message = ref('Hello, World!')
&lt;/script&gt;

&lt;style scoped&gt;
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}
h1 {
  color: #42b883; /* Vue 공식 로고 색상 */
  font-size: 3rem;
}
&lt;/style&gt;</code></pre>
<h2>프로젝트 실행</h2>
<pre><code>npm run dev</code></pre>
<p>브라우저에서 <a href="http://localhost:5173/">http://localhost:5173/</a> 을 열어 실행된 화면을 확인합니다.</p>
<p><span></span> <span>Post Views:</span> <span>10</span>
			</p>											</div>
		
	
	</article></div>

상구리의 기술 블로그

[Vue.js] VueJS 3 시작하기: 설치부터 Hello World까지
Node.js 설치
여기 에서 Node.js 최신버전을 다운받아 설치합니다.
# 설치확인
node -v
v22.16.0
npm -v
10.9.2
VSCode 및 확장 플러그인 설정
VSCode 설치
Vue (Official) 확장 설치
Vue 3 프로젝트 생성
npm create vue@latest
cd hellovue
npm install
Hello World
src/App.vue 파일을 생성하고 아래 코드를 입력합니다.
<template>
  <div class="container">
    <h1>{{ message }}</h1>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 반응형 데이터 정의
const message = ref('Hello, World!')
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}
h1 {
  color: #42b883; /* Vue 공식 로고 색상 */
  font-size: 3rem;
}
</style>
프로젝트 실행
npm run dev
브라우저에서 http://localhost:5173/ 을 열어 실행된 화면을 확인합니다.

[Vue.js] VueJS 3 시작하기: 설치부터 Hello World까지

댓글