[프로젝트][ToDoList] 프로젝트 생성하고 구조 확인하기

뷰 CLI를 이용한 프로젝트 생성

 

• 프로젝트로 사용할 폴더 생성후 cmd로 주소창을 따라 들어가 vue 프로젝트를 생성

• npm install 명령어를 입력해  pakckage.json파일에 등록된 자바스크립트 라이브러리를 모두 다운로드한다.

• npm run dev를 실행하여 애플리케이션이 정상적으로 실행되는지 확인한다.

프로젝트 초기 설정

 

1.반응형 웹 디자인 태그 설정

• index.html 파일의 Head 태그에 meta 태그 설정하기  
• meta 태그의 viewport 속성 모발일 웹에서도 레이아웃이 깨지지 않고 잘 보이도록 함 
• meta 태그의 width=device-width 속성은 기기의 너비만큼 웹페이지의 너비를 결정
• initial-scal=1.0은 페이지의 배율로 페이지가 로딩되었을 때 줌레벨을 의미

2.어썸 아이콘 CSS설정

• font awesome cdn 검색후 사이트에 들어가 cdn 받기 
• 아이콘 사용을 위한 사이트이다.

3.폰트와 파비콘 설정

• Favicon은 앱 실행시 웹 사이트 제목의 왼쪽에 표시되는 로고 
• 구글 폰트의 Ubuntu 사용하기 
• Favicon Generator 검색 안내에 따라 assets 폴더 밑의 logo.png 파일을 파비콘 파일로 변환
• 구글 폰트 우분투를 검색해 link 가져오기 

Favicon 사이트

컴포넌트 생성하고 등록하기

• TodoHeader,TodoInput,TodoList,TodoFooter 총 4개의 컴포넌트 생성

컴포넌트 생성

• src밑에 components 폴더 생성한 후 4개의 컴포넌트 파일 생성
  *컴포넌트는 관례상 src/components 폴더에서 관리를 한다.
• 규모가 커지면 기능별로 한번 더 나누어 담는다 src/login/components

4개의 컴포넌트

• 각 컴포넌트의 기본 태그를 작성한다.

컴포넌트 등록

• 4개의 컴포넌트를 최상위 컴포넌트 App.vue에 등록한다.
• 등록하기 위해서는 최상위 컴포넌트에 하위 4개의 컴포넌트 파일에 대한 정보를 불러오는 코드를 명시한다.

 

 

 

 

 

*ES5와 ES6 표현식 차이 

• ES6는 파일을 직접 불러와 객체에 담지만 ES5는 컴포넌트의 내용을 직접 넣어주는 것이다.

• 최상위 컴포넌트의 HTML에 각각의 컴포넌트를 넣어준다.