Vuetify ?

개발자 갸갸 2020. 4. 9. 10:51

2020. 4. 9. 10:51

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 vuetify

Vue UI로 설치하기

Vuetify는 Vue CLI의 새로운 시각적 응용 프로그램 인 Vue UI를 사용하여 설치할 수도 있습니다 . 최신 버전의 Vue CLI가 설치되어 있는지 확인한 다음 터미널 유형에서 설치하십시오.

// ensure Vue CLI is >= 3.0
$ vue --version

// Then start the UI
$ vue ui

Vue 사용자 인터페이스가 시작되고 새 창이 열립니다브라우저에서. 화면 왼쪽에서 플러그인을 클릭합니다 . 탐색 한 후 입력 필드에서 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

개발야 기하하자