Vue3: 프로젝트 폴더/파일 구성, ESLint

새로 만든 Vue 프로젝트의 폴더/파일 구성

폴더/파일내용
.vscodeVisual Studio용 설정 파일
dist배포용 파일 세트를 저장
node_modules라이브러리를 저장
public웹으로 공개할 파일을 저장
src소스 코드 파일을 저장
src/assets그림 등의 애셋을 저장
src/components컴포넌트 파일을 저장
src/App.vue메인 단일 컴포넌트 파일
src/main.ts메인 스크립트 파일
.eslintrc.cjsESLint 관련 파일
.gitignoreGit에서 제외할 파일을 설정
env.d.ts환경 변수를 설정하는 파일
index.html탑 페이지
package-lock.jsonnpm 의존 관계 설정 파일
package.jsonnpm 관련 설정 파일
README.mdReadMe 파일
tsconfig.*.jsonTypeScript 관련 설정 파일
vite.config.tsVite 관련 설정 파일

배포용 파일이 저장된 dist 폴더

프로젝트를 만든 직후에는 dist 폴더가 존재하지 않음. 아래 명령으로 배포용 파일을 작성하는 빌드를 진행하면 폴더가 생성된다.

npm run build

ESLint 실행

ESLint를 사용한다고 선택한 Vue 프로젝트의 경우 아래 명령 실행하면 ESLint가 실행되어, 소스코드의 문제점을 지적해준다.

npm run lint

또한 Prettier로 Format Document(문서 서식)을 선택하면 코드를 자동으로 정렬해준다.

키보드 단축키: Ctrl + Shift + P -> Format Document(문서 서식)

이것도 살펴보세요!

WSL 개발 환경 설정

WSL로 개발 환경 설정하는 법 https://learn.microsoft.com/ko-kr/windows/wsl/setup/environment 1. 아래 명령으로 WSL을 설치하고, 리눅스 사용자 이름과 암호 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다