Windows IntelliJ에서 npm, vue-cli 설치 방법

intellij에서 vue-cli를 설치하여 사용할려면 우선 node.js를 설치하고 npm을 설치하시면 됩니다.

 

1. node.js를 다운로드하시고 설치합니다.

 

https://nodejs.org/en#download

Node.js

참고: https://www.jetbrains.com/help/idea/installing-and-removing-external-software-using-node-package-manager.html#ws_installing_and_upgrading_packages

npm, pnpm, and Yarn | IntelliJ IDEA

2. 터미널에서 다음의 "@vue/cli"를 설치하는 명령어를 실행합니다.

 

# npm install -g @vue/cli

만약, 아래와 같은 에러가 발생하면 node.js의 버전을 변경합니다.

E:\~\frontend>npm install -g @vue/cli
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@achrinza/node-ipc@9.2.6',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v20.3.0', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

3. 터미널에서  vue 프로젝트를 생성하고자 하는 폴더로 이동한 후 프로젝트를 생성합니다. 저는 그 다음에 "Default"를 선택했습니다.

# vue create [프로젝트명]
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

4. vue 프로젝트 설치 후, vue 서버 실행합니다.

# cd [프로젝트폴더]
# npm run serve

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

 INFO  Starting development server...


 DONE  Compiled successfully in 4866ms                                                                     오후 12:13:09

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.X.x:8080/

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

 

5. vue cli에 대한 설정은 다음의 사이트에서 확인하세요.

 

https://cli.vuejs.org/config/#vue-config-js

Configuration Reference | Vue CLI