[Vue3] 1. 환경 설정 및 프로젝트 생성하기

1. 환경 설정

• nodejs 설치

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

• node 버전 확인

  

    
    
    
    
  
❯ node -v
v16.20.0

 

 

• vue cli 설치

  

    
    
    
    
  
❯ npm install -g @vue/cli

 

 

• vue 버전 확인

  

    
    
    
    
  
❯ vue -V
@vue/cli 5.0.8

 

 

 

2. vue 프로젝트 생성

• vue create {프로젝트이름} 실행

  

    
    
    
    
  
❯ vue create vue-test-project

 

 

• Vue3 선택

  

    
    
    
    
  
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

 

 

• 완료 메시지

  

    
    
    
    
  
......생략

📄  Generating README.md...

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

 $ cd vue-test-project
 $ npm run serve

 

 

• vscode로 project open

 

3. localhost 실행

• local 실행하기

  

    
    
    
    
  
npm run serve

 

 

• localhost 실행 확인

  

    
    
    
    
  
 DONE  Compiled successfully in 1633ms

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

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

 

 

• localhost:8080 접속

 

---

참고

https://cli.vuejs.org/#getting-started

Vue CLI