index.html : 프로젝트의 메인 페이지 템플릿입니다. 프로젝트 디렉토리에 있습니다 public. 이 파일에서는 웹페이지 제목, 메타 태그, 가져온 스타일 시트 및 스크립트 파일 등과 같은 전체 애플리케이션의 뼈대를 정의할 수 있습니다. 그 중에서 가장 중요한 것은 <div id="app"></div>Vue 애플리케이션의 마운트 지점 역할을 할 루트 노드에 대한 자리 표시자를 정의하는 것입니다.
App.vue : 프로젝트의 루트 구성 요소입니다. Vue.js 애플리케이션에서 모든 구성 요소는 루트 구성 요소에 래핑되어야 합니다. App.vue는 다른 하위 구성 요소를 호스팅하는 컨테이너로 간주될 수 있습니다. 이 파일에서는 전체 애플리케이션의 레이아웃과 공통 인터페이스 요소는 물론 전역 스타일과 로직을 정의할 수 있습니다. <template>일반적으로 구성 요소의 구조를 정의하는 섹션, <script>구성 요소의 논리를 정의하는 섹션, <style>구성 요소의 스타일을 정의하는 섹션을 포함합니다 .
main.js : 애플리케이션의 항목 파일입니다. 이는 전체 Vue.js 애플리케이션의 시작점입니다. 이 파일에서는 다음과 같은 주요 작업을 수행해야 합니다.
- Vue 모듈 및 앱 구성 요소 가져오기:
import문을 통해 Vue 및 앱 구성 요소를 가져옵니다. - Vue 인스턴스 생성:
new Vue()Vue 인스턴스를 생성하고 객체를 매개변수로 전달하는 데 사용됩니다. - 탑재 지점 구성: 인스턴스의 구성 개체에서
render함수 또는template옵션을 사용하여 탑재할 구성 요소를 지정합니다. 일반적으로App구성 요소는 이 마운트 지점에 마운트됩니다#app. - 애플리케이션 시작: 옵션을 호출
vm.$mount()하거나 직접 지정하여 애플리케이션을 시작합니다.el
연결하다:
index.html프로젝트의 전체 구조와 <div id="app"></div>Vue 애플리케이션을 마운트하는 데 사용되는 초기화 자리 표시자를 포함하는 프로젝트의 기본 페이지입니다. App.vue프로젝트의 루트 컴포넌트로, 다른 하위 컴포넌트에 대한 컨테이너이며 전체 애플리케이션의 레이아웃, 스타일, 일반 로직을 정의하는 역할을 담당합니다. main.js프로젝트의 항목 파일이며 Vue 인스턴스를 생성하고 전체 Vue.js 애플리케이션을 시작하기 위해 루트 구성 요소를 App.vue마운트하는 역할을 담당합니다. #app세 가지가 함께 작동하여 완전한 Vue.js 애플리케이션을 구성합니다. 개발 중에는 에서 App.vue개별 페이지와 구성 요소를 정의한 다음 에서 마운트 main.js합니다 .App.vueindex.html