[Vue.js] Vue CLI + Vuetify + Vue Router

1. Vue CLI 설치

vue-cli는 기본 vue 개발 환경을 설정해주는 도구이다. vue-cli가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야하는지 webpack 설정은 어떻게 해야하는지에 대한 고민을 덜 수 있다.

여기서 CLI란?
명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용을 하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.(위키백과)

npm 또는 yarn이 설치되어 있어야 한다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

설치 후 아래 명령어를 입력했을 때 vue의 version이 나오면 설치가 완료된 것이다.

vue --version

 

2. vue-cli로 Vue 프로젝트 생성

프로젝트 생성 명령어는 아래와 같다.

vue create [project_name]

아래와 같은 선택지가 주어지는데, 기본적으로 default([Vue2] or [Vue3]babel, eslint)가 주어지고(vue 버전에 따라 다름),  여러 필요 라이브를 선택할 수 있는 Manually가 있다.

Manually는 Babel, TypeScript, PWA, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing, E2E Testing 등 필요한 라이브러리와 설정들을 추가할 수 있다.

Manually를 선택했을 때 볼 수 있는 화면

 

3. Vuetify 설치

구글의 Material Design을 기반으로 설계된 Vue 기반의 UI 프레임워크이다.

아래 명령어로 설치할 수 있으며 프로젝트 생성시와 같이 여러가지 preset 중 선택할 수 있다.

vue add vuetify

 

4. Vue router 설치

Vue router는 Vue.js의 공식 라우터이다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀이 통합되어있다.

아래의 기능을 포함한다.

• 중첩된 라우트/뷰 매핑
• 모듈화된, 컴포넌트 기반의 라우터 설정
• 라우터 파라미터, 쿼리, 와일드카드
• Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
• 세밀한 네비게이션 컨트롤
• active CSS 클래스를 자동으로 추가해주는 링크
• HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백)
• 사용자 정의 가능한 스크롤 동작

설치 명령어는 아래와 같다.

vue add router

 

참고자료:

01. vue-cli 알아보기 - simpleVue