반응형
앱 인스턴스 생성
Vue 앱의 시작점은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것입니다:
import { createApp } from 'vue'
const app = createApp({
/* 최상위 컴포넌트 옵션 */
})최상위 컴포넌트
일반적으로 App.vue라는 파일에 최상위 컴포넌트를 정의합니다:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello from App.vue!"
}
}
}
</script>그리고 이를 앱 인스턴스 생성 시 사용합니다:
import App from './App.vue'
const app = createApp(App)앱 마운트
생성된 앱 인스턴스를 DOM 요소에 마운트 합니다:
app.mount('#app')HTML 구조
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>컴포넌트 구조
복잡한 앱의 경우, 컴포넌트 트리를 구성할 수 있습니다:
App (최상위 컴포넌트)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter
├─ TodoClearButton
└─ TodoStatisticsVue 앱 생성은 이러한 기본 구조를 따르며, 컴포넌트를 조합하여 복잡한 UI를 구축할 수 있습니다. 앱의 규모와 복잡성에 따라 상태 관리, 라우팅, 빌드 도구 등을 추가로 고려해야 합니다.
[Vue] 뷰 앱 생성하기
앱 인스턴스 Vue 앱을 생성하기 위해서는 먼저 Vue 인스턴스를 생성해야 합니다. Vue 인스턴스는 Vue ...
blog.naver.com
[Vue] 뷰 싱글 페이지 애플리케이션(SPA) 만들기 위한 사전 준비
Vue.js를 사용하여 싱글 페이지 애플리케이션(SPA)을 개발하기 위한 사전 준비 과정을 상세히 알아보겠습니다. 이 과정에는 프로젝트 구조 설정, Vue.js 설치 방법, 그리고 모듈화 기법 등이 포함됩
hoosfa.tistory.com
반응형
'IT기술 > 뷰.js (vue.js)' 카테고리의 다른 글
| Vue.js의 반응형 시스템 마스터하기: reactive와 ref의 활용 (2) | 2025.03.26 |
|---|---|
| Vue.js 템플릿 완벽 분석: 데이터 바인딩부터 디렉티브 활용까지 (2) | 2025.03.24 |
| [Vue] 뷰 싱글 페이지 애플리케이션(SPA) 만들기 위한 사전 준비 (0) | 2025.03.21 |
| [Vue 빠른 시작] 온라인 플레이그라운드로 Vue.js 실습하기 (2) | 2025.03.20 |
| [Vue.js 완전 정복] 현대적 웹 개발을 위한 프로그레시브 JavaScript 프레임워크 (2) | 2025.03.19 |