Client 초기 설정

1. Vue CLI 설치

• 설치 명령어

sudo npm install -g @vue/cli

2. Vue create

• 명령어

vue create [프로젝트 이름]

• Use https://registry.npmmirror.com for faster installation? : Y

  

• Manually select 선택

• space로 원하는 옵션 선택.

  • Babel
  • TypeScript
  • Router : 라우팅을 이용하여 페이지를 갱신하는 라이브러리
  • Vuex : 전역 state 관리 라이브러리

  

• Vue2 선택

  • 이유는 Vuetify를 설치할껀데 Vue3를 사용하면 충돌난다.. 였지만 Vuetify3 생긴거같다! 근데 일단 Vue2로 써보려한다. 익숙하니까.

  

• Use class-style component syntax? : Y

  • 클래스 스타일의 컴포넌트 문법을 사용할것인가?
    

• Use Babel alongside TypeScript : Y

  • 타입스크립트 설정에 바벨을 추가할것인지에 대한건데 추천이 Y다.
    

• Use history mode for router?

  • router의 설정 값 인데 history mode와 hash mode가 존재한다.
    • history mode : URL이 변경될 때 페이지를 다시 로드하기에 URL에 대해서 index.html로 전달해주는 서버 설정이 필요하다.
    • hash mode : URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다.
      

• Pick a linter / formatter config: ESLint with error prevention only
  

• Pick additional lint features : Lint on save
  

• Where do you prefer placing config for Babel, ESLint, etc.? : In dedicated config files

  • 바벨 등에 대한 설정을 어디에다 설정할것인가
    

• Save this as a preset for future projects?

  • 추후 이 설정을 다른 프로젝트에도 사용할 수 있도록 프리셋으로 만들거냐는 옵션인데 마음대로 설정하자.

• Pick the package manager to use when installing dependencies: Use Yarn

  • yarn 을 사용해서 패키지 관리를 할것이다.
    

• 완료

  • 필요한 의존성들이 자동으로 설치된다.
    

3. 클라이언트 실행

yarn serve

• 정상적으로 서버가 실행되면 URL이 나타난다.

• 접속
  http://localhost:8081/
  

4. Vuetify 설치

• 설치

vue add vuetify

• Choose a preset: Vuetify 2 - Configure Vue CLI (advanced)
  

• Use a pre-made template? (will replace App.vue and HelloWorld.vue) Y

• Choose a preset: Vuetify 2 - Configure Vue CLI (advanced)

• Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes

• Use custom theme? Yes

• Use custom properties (CSS variables)? Yes

• Select icon font Material Design Icons

• Use fonts as a dependency (for Electron or offline)? Yes

  • 온라인에서 사용할것인지 Electron 같은 오프라인 환경에서도 동작하는 폰트로 사용할건지에 대한 내용

• Use a-la-carte components? Yes

• Select locale Korean

• 다 선택하고 설치하면 현재 이런 에러가 뜬다!
  • 해결 방법은 yarn install 해주자.

error An unexpected error occurred: "https://registry.npmmirror.com/vuetify/-/vuetify-2.6.12.tgz: Request failed \"504 Gateway Timeout\"".

• 이때 yarn serve를 하면 현재 에러가 난다. tsconfig.json에 다음을 추가해주자

{
  ...
  "noImplicitAny": false,
  "types": ["webpack-env", "vuetify"],
  ...
}

• 클라이언트 실행

yarn serve

• Vuetify가 설치된 UI를 확인할 수 있다!