Vue 프로젝트 Init
🚀 Vue 프로젝트 초기화
정의
Vue 프로젝트 초기화는 Vite를 기반으로 Vue 애플리케이션의 기본 구조와 실행 환경을 준비하는 과정이다.
🧩 준비 사항
- Node.js 설치
- npm 또는 yarn 환경 확인
- Vite 기반 프로젝트 생성 도구 사용
🛠️ 프로젝트 생성
npm create vue@latest
npm install
npm run dev
🧰 Vue Devtools
- 크롬 확장 프로그램이다.
- Vue가 동작하는 페이지에서 컴포넌트 구조를 확인할 수 있다.
- 개발 중 상태와 props를 확인할 때 유용하다.
📁 프로젝트 구조
public
- 정적 파일을 두는 폴더다.
src
- 소스 코드가 들어가는 핵심 폴더다.
파일 구조
🧩 초기화 후 확인할 것
npm run dev로 개발 서버가 실행되는지 확인한다.src안에 컴포넌트 구조가 정상인지 확인한다.- Vue Devtools로 컴포넌트 트리를 확인해본다.
📌 정리
- Vue 프로젝트는 보통 Vite 기반으로 시작한다.
npm create vue@latest이후 설치와 실행을 순서대로 진행하면 된다.- Devtools를 같이 설치하면 개발할 때 편하다.
댓글남기기