[Vue.js] 초기 세팅 가이드

Vite + Vue 프로젝트 생성 커맨드 (JavaScript 기반)

npm create vite@latest "프로젝트 이름" --template vue

• Node.js 16.0 이상 권장
• 실행 후 프로젝트 템플릿을 선택하는 인터랙션이 나옴!

참고: Node.js 버전이 낮을 경우 npx로 실행하거나 버전 업 필요

 

 

package.json 파일에 명시된 모든 의존성(dependencies)을 한꺼번에 설치

npm install

 

 

npm 빌드

npm run build

 

 

 

+ 기존의 "dev": "vite"를 "dev": "vite --host"로 변경하자!

vite --host 의 의미: 로컬 IP 접근 허용 (모바일 디바이스 테스트 시 유용)

{
  "name": "skala-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.2.0"
  }
}

 

 

 

개발 환경에서 Vite 개발 서버를 실행

npm run dev

 

※ Vite 개발 서버를 실행하면 기본적으로 5173 포트에 바인딩된다

 

 

 

 

 

[필수 VSCode 익스텐션]

Vue - Official

 

 

[필수 크롬 브라우저 확장 프로그램]

chrome 웹 스토어 Vue.js devtools

F12 개발자 도구에 Vue 탭이 생긴 것을 확인할 수 있다

컴포넌트 및 라우팅 페이지 상태를 확인 가능

 

 

 

(참고) Vue.js 공식 가이드 - 한국어

https://ko.vuejs.org/guide/introduction

Vue.js