Vue 프로젝트 생성 및 환경설정

이클립스에서 작성한 내용들을 Vscode에서 불러와 Front를 구성 해 주어야 할 때 필요한 과정들이다.  cmd 창을 이용하기 보다는 Vscode 에 있는 Terminal 탭을 클릭 후 사용 해도 결과는 똑같으니 꼭 cmd 창을 켜서 진행하지 않아도 된다. 하지만 일단 cmd가 살짝 멋있어 보이니까 cmd 로 진행을 해보려고 한다. 

 

폴더 생성 

폴더를 생성 할 원하는 경로를 들어가 vue create 폴더명 을 입력해 준다. 

cd ../ 이것은 경로를 거슬러 올라가는 코드이다. 

나는 위와 두번 거슬러 올라갔는데 한번에 하는 방법은 아래와 같으니 편한 방법으로 사용하면 좋을 것 같다. 

 

생성 된 폴더 기본 설정

vue create 폴더명 이 성공 하게 되면 아래와 같이 preset을 설정하라고 나온다. 

 

Manually select features 

 

Router 와 Vuex 설정

방향키를 이용해 내려가서 스페이스바를 눌러서 선택해준다. 

Vue.js 버전 설정

 

router 기록모드 사용 

history mode는 url을 만들때 # 같은 해쉬태그 대신에 사람이 읽기 쉬운 / 같은 걸 사용하는 모드이다. 만일 관리자 사이트를 만들면 필요가 없겠지만 쇼핑몰같은 프런트 사용자가 접근하는 페이지라면 history mode가 중요해지니까 Y를 누른다.

 

 

eslint 와 prettier 설정

eslint는 보통 잘못 입력한 문법을 자동으로 수정하기 위해서 사용하고 Prettier는 팀원간의 코딩 컨벤션을 맞추기 위해서 사용한다. 오류를 막아주는 ESLint 를 선택한다. 

 

추가적인 Lint 선택 

 

선호 장소 선택 

위에서 만들어 낸 Babel, ESLint, etc 등등을 어디에 놓기를 선호하는지 묻는 것으로  package.json을 선택한다. 

 

선택 기록 저장 

지금 선택한 기록을 다음에도 사용 할 것인지 묻는 질문으로 알아서 답하면 된다. 나는 저장하지 않고 다시 사용하겠다고 N 을 선택했다. 

 

설치 진행 

 

서버 실행

설치가 완료 되면 하기와 같이 $ 에 있는 문구를 한 줄 씩 작성 하면 서버를 실행 한다.  

 

서버 주소 확인

서버 실행이 끝이 났으면 하기와 같이 주소가 나타난다. 

클릭하면 localhost:8082 라는 주소의 웹페이지가 생성이 되었다는 것을 알 수 있다. 

 

Vscode로 불러오기

Vscode를 열어서 파일에 Open Folder 를 클릭한다. 

클릭 후 아까 cmd를 통해 만들어 놓은 폴더를 찾아 폴더 선택을 완료 한다. 

 

포트번호 바꾸기 

프로젝트를 진행 하다가 Front 단에서 포트번호가 달라야 할 경우가 생겼을 때에는 package.json의 6행에 '--port 포트번호' 를 입력 해 준다. 

 

서버 재 실행 

포트 번호를 바꾸고 npm run serve 를 실행 하니 바뀐 포트번호로 화면이 나오는 것이 확인 가능하다.

 

뷰 생성이 완료 되었다면 최종 적으로 보여야 할 페이지