Vuetify
- Front End/Vue.js
- 2021. 6. 15. 22:59
Vuetify.js
뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...
vuetifyjs.com
뷰티파이도 뷰처럼 CDN이 있다. 보면 알겠지만 버전이 있으니 잘 사용해야한다.
HEAD 태그에 뷰티파이에서 필요한 스타일 링크도 같이 사용해줘야한다.
<!DOCTYPE html>
<html>
<head>
<!-- 모바일 기기의 접속 시 화면 크기 조절을 위해 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- vuetify.js에 필요한 스타일 파일 링크 연결 -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<!-- 이곳에 컴포넌트를 구현하면 된다 -->
<v-content>
<v-main>
<v-btn depressed color="primary">Primary</v-btn>
</v-main>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>
위는 CDN이고 vue cli가 설치된 경우에는 vue add vuetify 명령을 통해 플러그인을 설치한 후
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: function (h) { return h(App) }
}).$mount('#app')
해당 플러그인을 import 해주고 Vue 객체에서 사용면 된다.
UI 컴포넌트는 Vuetify 외에 Element
Element - The world's most popular Vue UI framework
element.eleme.io
BootstrapVue
가 있다!
나는 Vuetify와 Element를 써봤는데 개인적으로는 Vuetify가 더 좋다.
https://vuetifyjs.com/en/components/grids
굳이 그리드가 아니더라도 디바이스의 크기에 따라 사이즈를 다르게 할 수 있다.
반응형 웹이란 소리다!https://v2.vuetifyjs.com/ko/getting-started/pre-made-layouts/
Application layouts — Vuetify.js
Select from a multitude of Vuetify Material Design layouts built to help kickstart your application.
v2.vuetifyjs.com
미리 만들어진 레이아웃도 있다.
자세한 사항은 https://vuetifyjs.com/
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...
vuetifyjs.com
'Front End > Vue.js' 카테고리의 다른 글
| router (0) | 2021.07.14 |
|---|---|
| Vue 위로 스크롤(새로고침) 막기 (0) | 2021.06.25 |
| Vuex (0) | 2021.06.21 |
| Vue.js 시작하기 (0) | 2021.06.15 |
| PWA (0) | 2021.06.14 |
