002 - 개발환경 세팅2 (프로젝트 생성)
남기용 306

Yarn 설치

yarn은 npm과 같은 패키지 메니저 입니다.
npm과의 차이점은 병렬처리를 통해 더 빨리 동작한다는 것입니다.
저는 글로벌 설치 하는것은 npm으로 할꺼고 프로젝트에 설치하는것은 yarn으로 하려고 합니다.

npm i -g yarn

머 취향에 따라 npm만 쓰셔도 관계가 업지만, 제 경험에서는 우리가 사용하게될 Oracle 클라우드의 성능이 낮아서 npm으로 대량의 패키지를 설치하는 경우 간혹 서버가 뻗어버리는 사태가 발생이 되는데 yarn을 사용하니 그런 문제가 없어지더라고요..


Npm 간단 명령어 정리

글로벌 설치시 -g 옵션을 넣습니다.

npm i <패키지명>
npm remove <패키지명>

yarn 간단 명령어 정리

글로벌 설치시 global 옵션을 넣습니다.

yarn add <패키지명>
yarn remove <패키지명>


Vue-Cli 설치

먼저 Vue.js 프로젝트를 만들기 위해 vue-cli를 설치해야 합니다.

Linux 또는 Mac에서는 sudo 명령이 필요할 수 있습니다.

npm i -g @vue/cli
vue --version

npm으로 설치된 글로벌 패키지 확인방법

--depth=0 옵션을 주지 않은경우 설치된 프로젝트의 하위 디펜던시들까지 다 나오게 됩니다.

npm list -g --depth=0

npm으로 설치된 패키지 삭제

npm remove -g @vue/cli

Vue 프로젝트 생성

일단 적당한 폴더를 하나 생성하시고 VS Code로 열어주시고요.

메뉴 → 터미널 → 새터미널 을 선택해서 터미널을 열어줍니다.

Windows사용자의 경우 기본 터미널이 Powershell 인데 bash를 입력해서 bash shell을 사용하도록 하겠습니다.

프로젝트 명을 저는 ezcode-home으로 하도록 하겠습니다. 이 부분은 사용자가 알아서 ^^

vue create ezcode-home

그럼 여러가지 선택지가 나오게 되는데 자세한 내용을 영상에서 설명하도록 하고,

대략 선택 순서는

  1. Manually selecte features

  2. Choose Vue version, Babel, Router, Vuex

  3. 2.x

  4. Yes

  5. In dedicated config files

  6. No

프로젝트 설정

이렇게 되면 먼가 막 다운받아서 프로젝트를 만들어줍니다.

프로젝트 구조의 자세한 내용은 영상에서 설명하도록 할께요.

프로젝트로 생성된 폴더로 가서 개발서버를 실행하고 브라우저로 확인해봅니다.

yarn serve

Vuetify 설치

Vuetify를 사용하면 머터리얼디자인이 적용된 아름다운 컴포넌트들을 쉽게 사용할 수 있습니다.

vue add vuetify

이것 또한 여러 선택지가 나오는데 다음과 같이 선택합니다.

  1. Configure (advanced)

  2. Yes

  3. No

  4. No

  5. Material Design Icons

  6. Yes

  7. No

  8. Yes

  9. English

0

그리도 다시 개발서버를 실행한 후 Vuetify가 적용된 개발 서버를 확인하세요

vue-cli yarn npm 프로젝트 vuetify
회원로그인 후 댓글을 작성하실 수 있습니다. 로그인
© 2021 ezcode all right reserved.