Vue.js 라이브러리

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0

Vuex

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램 (opens new window)과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다.

https://vuex.vuejs.org/kr/

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

https://simplevue.gitbook.io/intro/01.-vue-cli

dayjs
최신 브라우저에서 날짜와 시간에 대한 구문 분석, 유효성 검사, 조작, 출력하는 경량 JavaScript 라이브러리입니다

dayjs('2018-08-08') // parse

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // display

dayjs()
  .set('month', 3)
  .month() // get & set

dayjs().add(1, 'year') // manipulate

dayjs().isBefore(dayjs()) // query

https://github.com/iamkun/dayjs/blob/HEAD/docs/ko/README-ko.md

highcharts-vue

import Vue from 'vue'
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue, {
	highcharts: Highcharts
})

Basic line: https://codesandbox.io/s/highcharts-vue-demo-ttner
Stock: https://codesandbox.io/s/highcharts-vue-demo-qkf43
Map: https://codesandbox.io/s/highcharts-vue-demo-cop9z
Gantt: https://codesandbox.io/s/highcharts-vue-demo-s8gcg
Store: https://codesandbox.io/s/highcharts-vue-demo-zrok6
NuxtJS (with SSR): https://codesandbox.io/s/z8jovxx04
Portals: https://codesandbox.io/s/highcharts-vue-demo-voo9m
Synchronized charts: https://codesandbox.io/s/vue-template-jyp7o

https://github.com/highcharts/highcharts-vue

lodash
종종 랜덤 샘플링, 수학적 기능을 자바스크립트를 통해 사용하고자 할 일이 있다.
하지만 자바스크립트는 이러한 기능을 구현하기 어렵다.(물론 가능은 하지만....)
따라서 이러한 활동을 쉽게 할 수 있는 라이브러리를 활용하고자 한다.

qs
A querystring parsing and stringifying library with some added security.

var qs = require('qs');
var assert = require('assert');

var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });

var str = qs.stringify(obj);
assert.equal(str, 'a=c');

https://www.npmjs.com/package/qs

shortid
Amazingly short non-sequential url-friendly unique id generator.

const shortid = require('shortid');
 
console.log(shortid.generate());
// PPBqWA9

https://www.npmjs.com/package/shortid

vue-awesome-swiper

vue-fragment

import { Fragment } from 'vue-fragment'

export const MyComponent {
  components: { VFragment },
  template: '
  <fragment>
    <input type="text" v-model="message">
    <span>{{ message }}</span>
  </fragment>
  ',
  data() { return { message: 'hello world }}
}

vue-router

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

vue2-touch-event

Common touch events, such as tap, swipe, touchhold (more)
All events support mouse and touch screen at same time
Optimized touch effects with touchClass option and v-touch-class directive
Binding multiple touch events on one DOM element
Customizable events with native-likely events handler
Allow splitting configurations for different DOM elements by v-touch-options directive
Directive names can be customized to avoid namespace conflict

jsdoc
JavaScript 소스 코드 파일에 주석을 달기 위해 사용되는 마크 업 언어입니다. JSDoc을 포함하는 주석을 사용하여 프로그래머는 작성중인 코드의 애플리케이션 프로그래밍 인터페이스를 설명하는 문서를 추가 할 수 있습니다.

splidejs

<script>
	new Splide( '.splide' ).mount();
</script>

or

<script>
	document.addEventListener( 'DOMContentLoaded', function () {
		new Splide( '.splide' ).mount();
	} );
</script>

<script>
      var elms = document.getElementsByClassName( 'splide' );
      for ( var i = 0, len = elms.length; i < len; i++ ) {
          new Splide( elms[ i ] ).mount();
      }
<script>

+@
vuetifyjs

Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.

https://vuetifyjs.com/en/components/bottom-navigation/#shift