Vue.js 파일, component, router 구조

npm create project 시 project 폴더 생성

main.js : npm run serve 시 실행되는 파일

인스턴스를 생성하고 index.html 파일과 연결해준다.  router, store를 사용하기 위한 Vue 함수를 넣어줌

 

App.vue : 화면구성

App.vue 파일은 하나의 컴포넌트이고, 여기에 여러 컴포넌트들을 불러와서 main.js로 넘겨주는 통합 컴포넌트

router-link to 라는 tag 사용  클릭 시 broswer url이 바뀜

>>url 변화는 router-view가 교체되는 것 =  index.js component로 연결되는 것 

router

화면이 이동되는 것 처럼 보일 수 있게 설정해주는 것

router/index.js > router-link to에서 연결한 path 라는 key가 존재

 

>> App.vue에서 Home을 클릭 -> router에서 설정한 path, name = home 에 맞는 component 값 = views/Homeview.vue  을 찾아서 보여줌

package.json : 프로젝트 정보, 실행 명령어, 운영을 위한 설치 정보