1. 환경구축
환경 구축 ( Vue-CLI) 기반
"Manually select features"를 선택
TypeScript를 잊지 않고 선택
Vue 버전의 선택 화면이 표시되므로 3.x (Preview)를 선택
class-style component syntax의 선택을 듣기 때문에 "N"(No)를 선택
bel alongside TypeScript를 사용을 위하여 "Y"(Yes)를 선택 아니오를 선택하면 설치 후 babel.config.js 파일이 프로젝트 디렉토리 만들어 지지 않음
기본값으로 Enter 버튼을 클릭
여기서도 기본값으로 Enter 버튼
여기서도 기본값으로 Enter 버튼
In package.json을 선택하면 eslint의 .eslintrc.js 파일의 내용이 package.json 파일에 들어감
프리셋을 저장할지를 설정 N을 설정
마지막도 그대로 Enter 버튼을 클릭하면 설치가 시작됩니다.
vue 시작
설치가 완료되면 설치 디렉토리로 이동하여 다음 명령을 실행
브라우저에서 http://localhost:8080/에 액세스하면 Vue.js + TypeScript 문자가 표시되면 TypeScript 설치가 완료
shims-vue.d.ts 파일
다른 프로젝트에서 보지 못했던 shims-vue.d.ts 파일이 있다. 파일을 열어보면 기존과는 다른 구조로 되어있어서 이질감이 느껴진다.
이 파일 목적은 Vue 컴포넌트의 정보를 타입스크립트에 제공하는 파일이다.
즉, 필요한 파일이고 커스텀할 필요성이 없으면 굳이 수정할 필요는 없다.
tsconfig.json 파일
파일에서 TypeScript 관련 설정
tsconfig.json 파일도 TypeScript를 이용하는데 필수적인 파일
기본 소스코드 분석
쿵스보이(얼짱뮤지션)