Vue 프로젝트 처음 생성하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js 초보 개발자, 프론트엔드 개발자

• 난이도: 초보자 수준, 프레임워크 설치 및 기본 설정에 집중*

핵심 요약

• npm create vue@latest 명령어로 Vite 기반 프로젝트 생성
• TypeScript 및 ESLint, Prettier 활성화 선택 필수
• npm run dev 명령어로 개발 서버 실행 후 핫리로드 기능 활용

섹션별 세부 요약

1. 프로젝트 생성 준비

• npm create vue@latest 명령어 실행
• 프로젝트 이름(my-vue-app) 입력
• TypeScript 선택 필수 (코드 안정성 향상)
• JSX, Vue Router, Pinia, Vitest 등은 선택하지 않음

2. 프로젝트 설정 및 의존성 설치

• 프로젝트 디렉토리 이동: cd my-vue-app
• 의존성 설치: npm install
• ESLint 및 Prettier 활성화로 코드 품질 관리

3. 개발 서버 실행 및 확인

• npm run dev 명령어로 서버 실행
• Vite 개발 서버가 기동 후 http://localhost:3000 접속
• Vue 로고와 "You did it!" 메시지 확인

4. 핫리로드 기능 활용

• 코드 수정 시 자동으로 브라우저에 반영
• 핫리로드 기능으로 개발 효율성 극대화

결론

• TypeScript 및 ESLint/Prettier는 필수로 선택하여 코드 품질 관리
• npm run dev 명령어로 서버 실행 후 핫리로드 기능 활용하여 실시간 개발
• 다음 단계로 Vue.js 핵심 개념 및 컴포넌트 구조 학습 진행