Vue3 설치 방법 및 프로젝트 생성

■ Vue3 설치 방법 및 프로젝트 생성

1. node.js를 먼저 설치한다.

  - node.js 설치방법 : https://200-rush.tistory.com/entry/NodejsInstall

 

2. 명령 프롬프트에서 아래와 같은 명령어를 입력하여 Vue를 설치한다.

C:\Users\MKMJ>npm install -g @vue/cli

 

3. 아래 이미지와 같이 나오면 설치가 완료된 것이다.

 

4. 설치가 완료되었으면, 명령 프롬프트에서 설치가 잘 되었는지 확인한다. 버전이 나오면 정상적으로 설치가 완료된 것이다.

C:\Users\MKMJ>vue -V

@vue/cli 5.0.8

 

5. 설치가 성공적으로 되었으니, 아래 명령어를 입력하여 vue 프로젝트를 생성한다. 프로젝트 경로를 변경하고 싶으면 원하는 경로에 가서 아래 명령어를 입력한다.

C:\Users\MKMJ>vue create vue_project_1

 

6. 아래와 같이 어떤 버전으로 프로젝트를 만들지 선택하여 엔터를 누른다.

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

 

7. 프로젝트 생성이 완료되었으면, 프로젝트 생성 경로로 이동하여 잘 생성되었는지 확인한다.

8. 명령 프롬프트 창에서 프로젝트 생성 경로로 이동 후, 아래와 같은 명령어를 입력한다.

C:\Users\MKMJ\vue_project_1>npm run serve

 

9. 명령 프롬프트에 아래와 같은 메시지가 나오면 성공한 것으로, Local 또는 Network 주소를 복사하여 브라우저에 붙여 넣는다.

 DONE Compiled successfully in 2465ms

 

  App running at:

  - Local: http://localhost:8080/

  - Network: http://192.168.219.189:8080/

 

  Note that the development build is not optimized.

  To create a production build, run npm run build.

 

10. 아래 이미지와 같이 나오면 성공