소개

이번에는 Vue.js를 사용하여 웹 애플리케이션을 구축했습니다. jQuery 세대의 필자였지만, jQuery 사용하지 않고 이렇게 풍부한 어플리케이션을 간단하게 만들 수 있을까, 다시 기술은 진보하고 있다고 실감했습니다.
조금이라도 세상의 도움이 되고 싶고, 이 어플리케이션 개발로 배운 Vue.js에 관한 노하우를 공유하고 싶습니다.

Vue.js와 Vuetify.js를 사용하여 샘플 응용 프로그램을 만들었으므로 이번에는 Vue.js와 Vutify.js에서 어떤 응용 프로그램을 만들 수 있는지 궁금합니다.
다음 번 이후의 투고로 고생한 것 등의 포인트를 샘플 어플리케이션을 이용해 설명할 예정입니다.

Vue나 Vuetify의 기본적인 부분은 일본어 매뉴얼이 충실하므로, 공식 사이트나 다른 사이트를 참고해 주세요.

이하에 샘플 어플리케이션의 특징, 주된 동작 환경 및 기동 순서에 대해 설명합니다.

샘플 애플리케이션의 특징

SPA (단일 페이지 애플리케이션)

다국어 지원

멀티 브라우저 지원

주요 운영 환경

도서관 등
버전


node.js
12.4.0

vue
2.6.10

vuetify
1.5.16

vue-router
3.1.3

vuex
3.1.1

vue-i18n
8.12.0

vee-validate
3.0.11

axios
0.19.0

시작 절차

1. node.js 설치

아래 사이트에서 설치 프로그램을 다운로드하여 설치합니다.
자세한 설치 방법은 생략합니다.
Node.js 다운로드 사이트

2. 소스 코드 다운로드

git clone 명령 등으로 샘플 애플리케이션의 소스 코드를 가져옵니다.

$ git clone https://github.com/Piecemeal-Technology-Inc/vue-app-sample.git

3. 애플리케이션 초기화

검색된 소스 코드의 루트 디렉토리로 이동하여 다음 명령을 실행합니다.

$ npm install

4. 애플리케이션 시작

다음 명령을 실행합니다.

$ npm run serve

다음과 같이 출력되면 기동 완료입니다.

 DONE  Compiled successfully in 47460ms 18:54:29

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://localhost:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080
에 브라우저로 액세스하면 다음과 같은 화면이 표시됩니다.

향후 게시 예정

SPA(단일 페이지 애플리케이션)

샘플 애플리케이션 구성

화면 전환 (Vue Router) 설정

개발 환경 구축이 불필요한 어플리케이션의 모형을 작성

다국어 대응

다국어 지원 (Vue I18n) 설정

입력 값 검증 라이브러리 (VeeValidate)를 다국어화

멀티 브라우저 대응

Vuetify.js에서 IE11에 해당

기타

Vue-router로 화면 전환으로 화면 입력 값을 그대로 둡니다.

화면 전환시 애니메이션 사용

Jest를 이용한 단위 테스트

Jest 설정

Vue 라이프 사이클 후크 테스트

Jest의 모의 기능 사용

단위 테스트에서 c0, c1 테스트 커버리지를 취하여 보고서를 출력합니다.