Vue CLI 설치하고 프로젝트 파일 생성하기

CLI 설치하기 

 

node.js 를 설치하면 npm이 자동 설치된다.

(위 링크 클릭 후 좌 우 중 좌측 LTS 다운로드)

(npm이란? 노드 패키지 매니저다)

 

아래 명령어로 버전 확인 하고

> node -v
v18.15.0
> npm -v
9.6.2

 

install 명령어 npm install -g @vue/cli 를 입력하면 설치 된다.

설치 완료 되었는지 아래 명령어로 버전을 확인하면 된다.

 

> npm install -g @vue/cli
> vue --version

 

공식문서 설치 가이드

 

주의 사항 

- vs코드 터미널에서 실행 시, 윈도우는 vue가 아니라 vue.cmd로 실행해야 관리자 모드로 명령할 수 있다. 

- 외부 터미널에서 실행 시 cmd를 관리자 권한으로 실행해야 한다.

- 환경변수 추가가 필요할 경우, 경로는 이 링크 참조해서 지정

  윈도우일 경우 C:\Users\[Username]\AppData\Roaming\npm.

- npm 버전 업그레이드가 필요하다는 안내문이 나오는 경우가 있는데, 그럼 npm 버전을 업그레이드 하면 해결된다.

- vue 명령어는 최소 12.0.0 버전의 node.js 가 필요하다. 아래 메시지 같은게 뜨면 nvm 으로 버전을 변경하자

You are using Node v10.16.3, but this version of @vue/cli requires Node ^12.0.0 || >= 14.0.0.
Please upgrade your Node version.

2023.05.08 - [Vue.js] - NVM으로 node 버전 변경을 해보자 (windows)

 

프로젝트 파일 생성하기

> vue create [경로]
> (윈도우) vue.cmd create [경로]

뷰 CLI 버전 4.5.x 이상은 Default Vue 2 선택 (Vue 3 X)
콘솔 안내에 따라 파일경로 이동하고 서버 구동하기 

> cd 경로 
> npm run serve

 

콘솔 결과 참고

vue 명령어가 안먹힐때는 vue.cmd 로 입력하면 된다. 예: vue.cmd --version, vue.cmd create vue-cli 등

C:\Users\kim>vue --version
@vue/cli 5.0.8

C:\Users\kim>vue create vue-cli


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in C:\Users\kim\vue-cli.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 857 packages, and audited 858 packages in 15s

91 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 92 packages, and audited 950 packages in 3s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-cli.
👉  Get started with the following commands:

 $ cd vue-cli
 $ npm run serve


C:\Users\kim>cd vue-cli

C:\Users\kim\vue-cli>npm run serve

> vue-cli@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 11090ms                                                                    오전 10:48:18


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080/ 으로 브라우저에서 접속되면, 성공

 

서버 종료는 crtl + c

 

 

 

 

참고 자료 

https://cli.vuejs.org/

https://cli.vuejs.org/guide/installation.html

https://stackoverflow.com/questions/5926672/where-does-npm-install-packages