#37 JS - Vue CLI 설치 및 프로젝트 생성 커맨드 & 주요 항목 정리

// 설치
npm install -g @vue/cli
// 프로젝트 생성
create vue <name>
// 서버 실행
npm run serve
// 라우터 추가
vue add router

• node_modules: 프로젝트에 설치된 라이브러리(모듈)들이 담긴 폴더

• public/index.html: 애플리케이션의 뼈대가 되는 HTML파일

• assets/: 애플리케이션에 필요한 (정적)파일들이 담기는 폴더

• components/: 작은 단위의 컴포넌트들이 담기는 폴더

• views: 큰 단위의 컴포넌트들(페이지 단위)

  • / -> Home, /articles -> Aricle

  • 대략적 기본 구조

            App  
    
         Home, About
    
     Hello, etc..

• router/: 라우터 정보

  • 어떤 페이지를 매칭 시켜 줄지 정하는 정보

• App.vue: 최상위 컴포넌트(루트 컴포넌트)

  • public/index.html 안에 mount app
    • index > app > ... 이런 계층
  • </router-link> : a 태그 (prevenDefault)되고 동적으로 빠르게 이동하게 해주는 역할
    • router폴더에 index.js에 routes와 연결
  • <router-view/> 랜더링이 되는 장소

• main.js:애플리케이션이 실행될 때 가장 먼저 실행되는 JS파일

컴포넌트 사용하기

1. 컴포넌트 불러오기
2. 컴포넌트 사용 등록하기
3. 사용하기