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(문서 서식)

이것도 살펴보세요!

드래곤 볼 × UT 컬렉션: 소년편, 사이어인편 구매

2023년 5월 1일부터 유니클로(Uniqlo)에서 판매중인 드래곤볼 티셔츠를 두 장 구매. 아내에게도 흰색 티셔츠를 한 장 …

답글 남기기

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