[Vue.js] VueCLI 프로젝트 구성_작성중

 

 

VueCLI 프로젝트 구성

 

 

node_modules/ : npm install 명령어로 다운받은 라이브러리

public/index.html : npm run serve실행시 로딩되는 파일,/ 애플리케이션의 뼈대가 되는 HTML파일

src/ : .vue파일, 애플리케이션이 동작하는 필요한 로직이 위치

assets/ : 이미지 등 애플리케이션에서 사용되는 파일들이 모여있는 디렉토리

components/ : Vue 컴포넌트들이 모여 있는 디렉토리

App.vue : 가장 최상위 컴포넌트

main.js :  가장 먼저 실행되는 javascript파일. Vue 인스턴스를 생성하는 역할

            ,기본적으로 애플리케이션의 설정들 플러그인, 라이브러리들을 파악할 수 있는 청사진(구조도)이 됨.

package.json : npm설정파일, vue애플리케이션이 동작하는 필요한 라이브러리들을 정의

---

package.json

 

vue-cli-service serve :  vue에서 정의해 놓은 명령어(우리는 간단하게 'npm run serve'로 실행하지만 원래는 '

vue-cli-service serve' 실행)

 

 

-> 근데, 실행해보면 'npm run serve'는 실행되는데 ' vue-cli-service serve' 실행 안되던데,, 찾아보기

---

index.html

- 'npm run serve' 명령어로 실제 실행되는 파일

- <!-- built files will be auto injected -->

  : 빌트된 파일이 자동으로 주입될 것임을 설명하는 주석인데, src폴더 하위에 main.js, App.vue 등등의 여러 파일들을 다 종합해서 하나의 파일(최소한의 파일)로 변환하여 묶어서 'index.html'에 주입해줌(내부적으로 'webpack' 기동)

 

---

main.js

* 나의 main.js파일과 캡틴판교님의 main.js파일이 달라 캡틴판교님 코드로 설명(아마 createApp이 아래 행위를 축약하는듯..)

new Vue({})
//new Vue({}) 인스턴스 생성

new Vue({
	render: h => h(App)
}).$mount('#app') 
//기본적으로 template이라는 속성을 사용했을 때, render라는 함수가 실행됨
//import한 'App.vue'라는 컴포넌트 파일을 불러와서 여기에 집어넣고 렌더링을 하는 행위

var App = {
	template: '<div>app</div>
}
new Vue({
	components:{
  		'app': App
    }
})

//위코드의 행위가 아래와 동일
new Vue({
	render: h => h(App)
}).$mount('#app') 

---

App.vue 

: 가장 최상위 컴포넌트

 

 

---

참고 : 캡틴판교 님 인프런 강의