2018년 7월 1일 16:07

Vue Boilerplate

vuejs-templates

Boilerplate 란?

boilerplate 는 반복되며 자주 쓰이는 것들에 대해 미리 개발환경설정을 구성해놓은 일종의 템플릿 개념이다.

front-end 개발을 하다보면 babel, webpack 등 많이 쓰이는 모듈들 또는 빌드 설정들, 폴더구조들을 반복적으로 설정하게되는데 이를 미리 만들어 놓는것이다.

이렇게 자동화를 해놓으면 갖다 쓰기만 하면돼서 개발환경구축에 시간과 비용을 단축시킬 수 있다.

$vue list

해당 명령어를 통해 공식적인 뷰 템플릿의 리스트들을 확인할 수 있다.

vuejs-templates 종류

vue-webpack-boilerplate

webpack + vue-loader 조합으로 hot-reload, lint-on-save, unit testing & css extraction 지원

해당 보일러플레이트는 hot-reload, router, unit test, linting 등을 지원해 큰 프로젝트를 진행할 시에 적합하다.

webpack-simple

빠르게 만들 수 있는 프로토타입, webpack + vue-loader 조합

해당 보일러플레이트는 빠른 프로토타입을 만들고싶은경우 사용된다

vue-browserify-boilerplate

browserify + vueify 조합으로 hot-reload, linting & unit testing 지원

browserify란?

CommonJS 모듈을 위한 모듈번들러.

vueify란?

browserify 변환을 위한 하나의 Vue 컴포넌트

해당 보일러플레이트 hot-reload, router, unit test, linting 등을 지원해 큰 프로젝트를 진행할 시에 적합하다

browserify-simple

빠르게 만들 수 있는 프로토타입, browserify + vueify 조합

해당 보일러플레이트는 빠른 프로토타입을 만들고싶은경우 사용된다

vue-pwa-boilerplate

vue-webpack-boilerpate 기반 PWA 를 추가한 템플릿

PWA란?

PWA(Progressive Web App) 이란 웹 사이트와 모바일 앱의 장점을 취하는 앱 생명주기 모델을 가지는 웹 어플리케이션.
즉, 모바일 웹이지만 앱처럼 사용하는듯한 사용자 경험이다.

해당 보일러플레이트는 PWA 를 만들기 위해 사용

vue-simple-boilerplate

Vue 를 알고싶은 초심자들을 위한 템플릿, 하나의 html 파일만 존재하 Vue 에대해 간단히 체험할 수 있다.

해당 보일러플레이트는 초심자들에게 체험하게끔 만든 템플릿

참고문서

©2022 heecheolman

Built with Gatsby