[Vue.js - Vue CLI] Vuex + Router 프로젝트 생성후 실행하기

Vue CLI로 Vuex & Router 프로젝트 생성 후 실행하기

 

프로젝트 생성

1. 먼저 프로젝트를 생성하기 위한 디렉터리를 하나 생성해줍니다.

 

2. CMD창을 열어 위에서 생성한 디렉토리로 이동해 줍니다.

cd ${디렉토리 경로}

 

3. vue 프로젝트 생성을 위해 vue create 명령어를 입력해 줍니다.

vue create ${프로젝트명}

≫ 'vue create' 를 하게 되면 아래 이미지처럼 옵션을 선택할 수 있는데요. 저는 Vuex와 Router설정을 자동으로 해주기 위해 

'Manually select features'를 선택했습니다.

≫ 다음 스텝에서 Router와 Vuex를 선택해준 후 엔터를 눌러줍니다.

 

≫ 이후 스텝은 개인 취향에 맞게 설정후 진행시면 프로젝트 생성이 완료됩니다.

 

 

프로젝트 실행

1. 프로젝트를 실행하는 방법은 두가지가 있습니다.

 

        첫 번째, CMD창에서 실행하는 방법

                - 프로젝트 위치로 이동한 후 프로젝트 실행 명령어를 입력합니다.

cd ${프로젝트명}
npm run serve

 

        두번째, VSCode에서 실행하는 방법

                - VSCode에서 위에서 생성한 프로젝트 폴더를 오픈 한 후 터미널에서 아래 명령어를 입력합니다.

npm run serve

 

2. 'npm run serve'를 하면 아래와 같이 서버가 실행되는데요

브라우저에서 Local 또는 Network 주소를 입력하면 페이지를 확인할 수 있습니다.