Toy Project - Client 초기 설정

JJStone·2022년 10월 25일
0

Toy Project

목록 보기
3/5

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

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를 확인할 수 있다!
profile
java, scala 개발자 입니다.

0개의 댓글