[Vue] vue 프로젝트 생성 방법

1. 파일 생성

 

2. VsCode 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

3. VsCode 터미널 실행

npm install -g vue

4. vue 프로젝트 빠르게 실행하기 위한 명령어

npm install -g @vue/cli

5. Vscode 플러그인 클릭

6. Vetur 확장자 설치

7. vue 프로젝트 생성

vue-project : 기존에 만든 프로젝트 설정이 저장됨

Detault Vue 3 : 최신버전 vue2 성능이 향상되었다.

Detault Vue 2 : 성능 우수, vue3 에 비해 일부 최적화가 부족할 수 있다.

Manually select features : 사용자가 원하는 특정 기능을 선택하여 vue 프로젝트 맞춤 설정 가능

 

8. 프로젝트 조건 Manually select features 선택

이동은 : 방향키

선택 : 스페이스바

Enter : 다음

 

🤔 어떤걸 선택해야 할까?

• Babel : 최신 js 문법을 구형 브라우저에서도 사용할 수 있도록 변환해주는 도구
• Ts : js에 타입을 추가한 언어, 코드 작성 시 타입 안전성을 보장
• progress web app : vue 프로젝트가 pwa 로 변환되어 오프라인 기능, 홈 화면에 추가, 푸시 알림 같은 기능 지원
• Router : vue Router는 Vue.js 애플리케이션에서 페이지 간 전환을 관리하는 라이브러리
• Vuex : vue 애플리케이션의 상태 관리 라이브러리
• css pre-processors : css 전처리기는 css 작성 시 더 많은 기능을 제공하는 도구
• Linter/ Formatter : 코드 품질 유지하기 위해 Linter
• Unit Testing : 단위 테스트 코드의 작은 단위를 테스트하여 기능이 의도대로 동작하는지 확인
• E2E Testing (End-to-End Testing) : E2E 테스트는 애플리케이션의 전체 흐름을 테스트

9. vue 설정

3.x 버전 클릭

y 클릭

y 클릭

y 클릭

ESLint with error prevention only 클릭

 

ESLint 설정에서 어떤 코드 규약을 사용할지 선택하는 옵션

• ESLint with error prevention only : ESLint 오류 예방만을 활성화한다. 코드 스타일에 큰 제약을 두고 싶지 않다면 이 옵션 선택
• ESLint + Airbnb config : Airbnb 스타일 가이드를 따르는 ESLint 규칙을 적용. 팀 개발에서 일관된 코드 스타일을 원한다면 이 옵션 선택
• ESLint + Standard config : Standard 스타일 가이드를 따르는 ESLint 규칙 적용. Airbnb 보다 규칙이 다소 적고 덜 엄격
• ESLint + Prettier : Prettier 코드 포매팅을 자동으로 처리하는 도구, 이 옵션 선택시 prettier 스타일을 자도으로 포맷해 준다.

Lint 추가 기능

• Lint on save : 이 옵션을 선택하면, 파일을 저장할 때마다, ESLint가 자동으로 코드 오류를 검사
• Lint and fix on commit: : 코드 품질을 지속적으로 관리하되, 코딩 도중에는 직접적인 수정 없이 커밋 가능

Lint on save 클릭

In dedicated config files 클릭

y 클릭

현재 선택한 설정을 저장할지 묻는 화면

7번에서 본 : vue-project : 기존에 만든 프로젝트 설정이 저장됨

 

프로젝트가 정상적으로 실행이 되면 cd 프로젝트 이동

npm run serve

 

실행

정상적으로 실행이 되는 것을 확인할 수 있다.