[Vue3] npm run dev 실행되지 않을 때

• 빠른 결론

 

새 프로젝트를 생성하고 간단한 기능을 구현해보는 것을 반복하다보니

따로 Vue CLI나 Vite 를 프로젝트를 전역에 설치하지 않아 npm run ~ 이 실패하는 경우가 생기는 것 같다..

 

만약 프로젝트 로컬로 설치했다면 npx로 실행해야한다고 하는데

npx vite 를 하고 Ok to proceed ? 를 y 했음에도 실패했다.

 

오류메시지를 보면, vite 패키지를 가져오려고 했으나, 설치되지 않아 문제가 생긴 거라고 한다.

 

npm install -g vite

 

이렇게 전역 설치를 하게 되면 어디서든 vite 명령어를 사용할 수 있다고 한다.

npm install -g vite	vite를 전역(Global) 으로 설치 컴퓨터 전체 모든 프로젝트 어디서든 터미널에서 vite 명령어 실행 가능
npm create vite@latest my-project	최신 버전의 vite템플릿으로 새 프로젝트 생성 my-project 라는 이름으로 Vite초기 세팅 자동 생성
npm install vite --save-dev	현재 프로젝트의 devDependencies로 vite를 설치 해당 프로젝트 내에서만 vite 사용하도록 설정
npm install	package.json 에 정의된 모든 패키지 설치 이미 설정된 의존성들을 설치
npx vite	프로젝트 폴더 내에 설치된 vite를 임시로 실행 전역 설치 없이 로컬 node_modules에 있는 vite실행

 

 

일단 npm install 을 해주고 다시 npm run dev 를 하니까 화면이 뜬다.

어렵네. 초기 세팅이 왜 안되는 걸까 ? 자동인 것 같은데 ? 라고 생각했는데

 

원래 프로젝트를 새로 만들 때마다 세팅해줘야하는 거라고 한다~ -gpt-

 

packagd.json 을 기준으로 실제 패키지를 내려받아야 사용할 수 있는 것 같다 ..

 

 

개발을 할 공간은 필요하기 때문에 

IDE에서 

npm create vite@latest my-project
cd my-project
npm install

 

터미널에서 vite 프로 젝트 생성 후 해당 폴더로 이동 -> npm 내려받기

이후 IntelliJ에서 File → Open → my-project 폴더 선택

 

이런 식으로 진행하면, 가장 최신의 Vite 템플릿을 쉽게 사용할 수 있다 ^^

---

 

# 1. 프로젝트 생성
npm create vite@latest my-project

# 2. 폴더 이동
cd my-project

# 3. 의존성 설치
npm install

# 4. 실행
npm run dev