새로 만든 Vue 프로젝트의 폴더/파일 구성
| 폴더/파일 | 내용 |
| .vscode | Visual Studio용 설정 파일 |
| dist | 배포용 파일 세트를 저장 |
| node_modules | 라이브러리를 저장 |
| public | 웹으로 공개할 파일을 저장 |
| src | 소스 코드 파일을 저장 |
| src/assets | 그림 등의 애셋을 저장 |
| src/components | 컴포넌트 파일을 저장 |
| src/App.vue | 메인 단일 컴포넌트 파일 |
| src/main.ts | 메인 스크립트 파일 |
| .eslintrc.cjs | ESLint 관련 파일 |
| .gitignore | Git에서 제외할 파일을 설정 |
| env.d.ts | 환경 변수를 설정하는 파일 |
| index.html | 탑 페이지 |
| package-lock.json | npm 의존 관계 설정 파일 |
| package.json | npm 관련 설정 파일 |
| README.md | ReadMe 파일 |
| tsconfig.*.json | TypeScript 관련 설정 파일 |
| vite.config.ts | Vite 관련 설정 파일 |
배포용 파일이 저장된 dist 폴더
프로젝트를 만든 직후에는 dist 폴더가 존재하지 않음. 아래 명령으로 배포용 파일을 작성하는 빌드를 진행하면 폴더가 생성된다.
1 | npm run build |
ESLint 실행
ESLint를 사용한다고 선택한 Vue 프로젝트의 경우 아래 명령 실행하면 ESLint가 실행되어, 소스코드의 문제점을 지적해준다.
1 | npm run lint |
또한 Prettier로 Format Document(문서 서식)을 선택하면 코드를 자동으로 정렬해준다.
1 | 키보드 단축키: Ctrl + Shift + P -> Format Document(문서 서식) |
