WEB/Vue.js

[Vue.js] Windows 에서 새로운 프로젝트 생성할 때

달별선장 2023. 8. 24. 17:40
728x90

문제 |

Vue.js 를 하다보면 이런 경우가 생길 수 있다.

 

- nodejs 환경 변수 설정을 하지 않는다.

- npm 명령어가 다른 프로젝트에서 실행되지 않는다. (npm run serve 등..)

- Visual Studio Code 의 터미널에서 CLI 로 Vue.js 프로젝트 생성이 안 된다. (vue-cli 가 설치되어 있지 않다는 에러 발생)

 

협업하여 이미 생성된 프로젝트가 있는데 껍데기만 있고, npm run serve 가 안 되었던 경우,

새로운 폴더를 생성하여 새로운 프로젝트를 만들고 싶을 때, 위와 같은 문제로 프로젝트 생성 및 실행이 안 되는 경우,

다음과 같이 해결이 가능하다.

 

해결 |

1. nodejs 를 시스템 환경 변수에 설정하여 어느 폴더에서든지 npm 명령어를 사용할 수 있게 한다.

 

시스템 속성 > 고급 > 환경 변수 > 

 

(1) 추가

속성 : NODE_HOME

경로 : node.js 설치된 경로, 대부분의 경우 아마 아래와 같을 것이다.

경로 예시 : C:\Program Files\nodejs

 

(2) 편집

추가 : %NODE_HOME% 

 

cmd 창에서 npm 명령어를 어디서든지 사용할 수 있는지 확인

> 터미널 > 아무 폴더나 들어가기 > npm -v (버전 정보 출력하는 명령어)

버전 정보가 출력되면 환경 변수가 설정된 것이다.

npm -v

 

 

2. npm 설치

npm install

 

3. yarn 설치

npm install yarn

 

4. Vue 프로젝트를 CLI 로도 생성할 수 있도록 설정

npm install -g @vue/cli

 

(추가) axios 사용이 필요한 경우

npm install axios

 

 

마무리 |

 

이후,

1. 협업하여 이미 생성된 프로젝트가 있는데 껍데기만 있고, npm run serve 가 안 되었던 경우

> npm run serve

npm run serve

 

2. 새로운 프로젝트를 생성하고자 하는 경우

> vue create {프로젝트명}

vue create front
 
 
728x90