Vant

Vue3를 기준으로 블로그가 포스팅 되었습니다.

기존에는 Quasar Framework를 이용하였으나, 네이티브 앱에 적합한 웹을 만들기 위해서 이것저것
Library를 찾던 도중, Vant라는 FrameWork를 발견하였습니다.

모바일 뷰에 적합하고 또한 이뻐보여서 사용해보았습니다.

이제부터 간단한 사용법에 대해서 설명해드리겠습니다.

Vant Logo

1. 설치방법

cmd에서 설치방법입니다.

$ npm i vant@latest-v2

2. 코드작성

쉽고 간단합니다.

// app.js or main.js
import { createApp } from 'vue';
import { Button, Icon } from 'vant';
import 'vant/lib/index.css';
const app = createApp();
app.use(Button);
app.use(Icon);
...

3. 결과

보통 cli 를 이용하면 component 의 import 없이 모든 컴포넌트를 이용할 수 있는데, 이렇게 하나하나씩 import 하면 파일을 불러오는데 적은 시간이 소요된다는 장점이 있으나, 하나하나 임포트를 해줘야한다는 단점이 있어서 사용자의 성향에 따라 불편할 수도 있을 것이라 생각되었습니다.