Vue 생태계에서 가장 활동적이며 다양한, 완벽한 기능을 갖춘 개발 프레임 워크이다. 쉽게 말해 vue에서 사용할 수 있는 용이한 UI toolkit이라고 할 수 있다.
Vue CLII로 설치하기
Vue CLI는 애플리케이션 구축의 복잡성을 추상화하기 위해 만들어진 차세대 cli 툴입니다. Vue CLI를 사용하여 앱을 시작하면 어려운 업그레이드 프로세스없이 공식 웹팩 업데이트 및 구성 변경은 물론 Vuetify의 업데이트를받을 수 있습니다.
Vue CLI를 사용하여 새 Vue.js 프로젝트를 아직 작성하지 않은 경우 다음 을 입력하여 작성할 수 있습니다.
$ vue create my-app
// navigate to new project directory
$ cd my-app이제 인스턴스화 된 프로젝트가 있으므로 Vuetify Vue CLI 패키지를 추가 할 수 있습니다
$ vue add vuetifyVue UI로 설치하기
Vuetify는 Vue CLI의 새로운 시각적 응용 프로그램 인 Vue UI를 사용하여 설치할 수도 있습니다 . 최신 버전의 Vue CLI가 설치되어 있는지 확인한 다음 터미널 유형에서 설치하십시오.
// ensure Vue CLI is >= 3.0
$ vue --version
// Then start the UI
$ vue uiVue 사용자 인터페이스가 시작되고 새 창이 열립니다브라우저에서. 화면 왼쪽에서 플러그인을 클릭합니다 . 탐색 한 후 입력 필드에서 Vuetify를 검색하십시오.
Nuxt로 설치
Vuetify는 Nuxt Vuetify 모듈 을 이용해 Nuxt 프로젝트에 추가할 수 있습니다.
$ yarn add @nuxtjs/vuetify -D
# OR
$ npm install @nuxtjs/vuetify -D설치 후, nuxt.config.js 파일의 'buildModules' 항목에 Vuetify 모듈을 아래와 같이 추가 해 주세요.
// nuxt.config.js
{
buildModules: [
// Simple usage
'@nuxtjs/vuetify',
// With options
['@nuxtjs/vuetify', { /* module options */ }]
]
}Nuxt 를 이용한 설치에 관한 더욱 많은 정보를 원한다면 Nuxt 공식 문서 를 참고하세요.
Webpack 설치하기
Vuetify 를 Webpack 프로젝트에 추가하기 위해선 몇가지 의존성들을 추가해야 합니다.
$ yarn add vuetify
// OR
$ npm install vuetify$ yarn add sass sass-loader fibers deepmerge -D
// OR
$ npm install sass sass-loader fibers deepmerge -D설치 후, webpack.config.js 를 연 후 아래의 코드조각을 rules 배열에 추가시켜 주세요. 만약 sass 룰이 이미 존재한다면, 아래 변경 코드 조각의 일부 또는 전부를 적용해야 할 수 있습니다. 조금 더 간결함을 위해 vuetify-loader 와 같은 유틸을 사용하고 싶다면 4 버전 이상의 Webpack을 사용하세요. Webpack 을 이용한 더욱 많은 설정 방법에 대해 알고싶다면 A-la-carte page 를 참고하세요.
A-la-carte (treeshaking) — Vuetify.js
A La Carte provides automatic treeshaking via the vuetify-loader. Use only the features that you need and drastically reduce your package bundle size.
vuetifyjs.com
// webpack.config.js
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}Vuetify 플러그인 파일을 만들기 위해 아래의 코드조각을 src/plugins/vuetify.js 로 만드세요.
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)사용 vuetify-loader하는 경우 아래 내용 을 사용하십시오.
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)설정된 Main Entry Point(보통 src/main. js) 로 이동하여 Vuetify object를 Vue 인스턴스에 옵션으로 추가 하세요.
// src/main.js
import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export
new Vue({
vuetify,
}).$mount('#app')폰트 설치하기
Vuetify 는 Google's Roboto font와 소재 디자인 아이콘 를 사용합니다. 가장 쉬운 설치방법은 index.html (보통 public/index.html)에 폰트 CDN 들을 추가하는것 입니다.
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">CDN 사용하기
Vue CLI 를 통한 설치 없이 직접 Vuetify.js 를 테스트 하고 싶다면, 아래의 코드 조각을 index.html 에 직접 추가 해 주세요. 이것으로 여러 컴포넌트들이 사용가능한 최신버전의 Vue와 Vuetify가 설치될 것입니다. 또한, Vuetify starter 를 이용해 Codepen 위에서 테스트 해볼 수 있습니다. 배포 환경에선 CDN 패키지를 추천하진 않습니다만 필요하다면 사용하는 에셋들의 버전을 명시해주는것이 유리합니다. 이것에 대하여 더 알고싶다면 jsdelivr 웹사이트를 참고하세요.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>Hello world</v-container>
</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.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>Vuetify 공식 홈페이지 자료 한국어로 번역해보면서 공부를 해보았다.
다음에는 Vuetify로 홈페이지를 직접 만들어 볼 것 이다.
'Vue' 카테고리의 다른 글
| 이벤트 전파와 버블링 (0) | 2020.04.08 |
|---|---|
| Vue 이벤트 수식어 (0) | 2020.04.08 |
| package-lock.json VS package.json ? (0) | 2020.04.07 |
| Vue Router ! (0) | 2020.04.06 |
| Vue lifecycle 이란 ? (0) | 2020.04.02 |
