빠른 시작

Vuetify 프로젝트를 바로 시작하려면 (공식 예제를 바탕으로한) Vuetify Vue CLI 패키지를 사용하세요. Vuetify는 SSR (서버사이드 렌더링), SPA (싱글페이지 어플리케이션), PWA (프로그레시브 웹 어플리케이션)와 단독 HTML 페이지를 지원합니다.

지원하는 브라우져

Vuetify는 웹개발의 다음 단계로 나아가는 것을 추구하는 진보적인 프레임웤입니다. 이 과업을 성취하기 위해, 오래된 버변의 인터넷 익스플로러를 지원하지 않는 다소의 희생이 있어야만 했습니다. 이 리스트는 호환되는 브라우져에 대한 완벽한 리스트는 아니지만 주로 지원하는 브라우져들입니다.

    Chrome
    지원됨
    Firefox
    지원됨
    Edge
    지원됨
    Safari 10+
    지원됨
    IE11 / Safari 9
    폴리필(polyfill)로 지원
    IE9 / IE10
    지원되지 않음

Vue CLI-3 Install

Vue-CLI 3 is the next generation cli tool made to help you get started more easily than before. When you start your app with vue-cli you will also be able to get the official webpack updates and config changes, as well as Vuetify's updates without an arduous upgrade process.

$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g

For information on how to use Vue-CLI-3, visit the official documentation

Tip: If you don't want to overwrite your current vue-cli because you still need vue init from version 2, then try this.

Once the cli is installed, you can generate a new project scaffold. Select the default install unless you have specific packages that you need to include (e.g. vuex or vue-router). This will create a new Vue project that's ready to go with your selected options.

$ vue create my-app
$ cd my-app

Now that you have an instantiated project, you can add the Vuetify package using the cli.

$ vue add vuetify

Keep in mind, if you are installing the Vuetify package on an existing vue-cli-3 project, ensure you have a clean working directory in case there are issues with the merge.

After installation, you can run the dev npm script in package.json. This will start a local development server at https://localhost:8080.

$ yarn serve
// OR
$ npm run serve

CDN을 이용한 설치

Vue CLI 를 이용한 템플릿 설치 없이 Vuetify.js를 테스트해보려면 아래 코드를 복사해서 index.html 파일에 붙여넣으세요. 이 코드는 최신 버젼의 Vue와 Vuetify를 받아서 컴포넌트들을 가지고 놀 수 있게 해줍니다. 또한 codepen 사이트의 Vuetify starter를 이용할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/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/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>

새로운 어플리케이션

Vuetify엔 8개의 미리 만들어진 Vue CLI 템플릿이 준비되어 있습니다. 이 중 3개는 공식 Vue.js 템플릿을 포크한 후 Vuetify를 더 빠르게 시작할수 있도록 살짝 변경하였습니다. 이 패키지들은 vue-cli를 필요로 합니다. vue-cli에 대해 더 알고 싶으시면 공식 깃헙 저장소를 방문하세요. 이 템플릿들은 다음 프로젝트를 최대한 빨리 시작할 수 있도록 디자인 되었습니다.

These packages require vue-cli@2. If you are starting a brand new application, it is recommended to use vue-cli@3. The below packages are currently being converted to use the new system. For more information on using version 3, click here

1
Experience

2
Application

3
Tests

4
SEO

5
Suggestion

  • One Minute Quickstart
  • Simple HTML
  • Webpack Simple
  • Webpack
  • Webpack SSR
  • NUXT
  • PWA
  • Electron
  • A La Carte
  • Cordova

기존 어플리케이션

Vuetify를 기존 프로젝트에 적용하려면 Vuetify를 node_modules에 반드시 설치해야 합니다. 이를 위해 npm 이나 yarn을 사용할 수 있습니다. 이 두 패키지 매니져는 당신의 어플리케이션에 사용되는 리소스를 관리할 수 있도록 해줍니다.

If your existing application is using vue-cli@3, please use the above guide on how to install the Vuetify package.

npm 을 사용하기 위한 더 자세한 설명은 공식문서에서 확인할 수 있습니다. npm 대신 yarn 을 사용하고 싶다면 여기에 공식문서가 있습니다. npm이나 yarn의 셋업(setup)이 끝나면 Vuetify를 설치하기 위해 다음 두 명령어중에 하나를 명령줄(command prompt)에서 사용할 수 있습니다.

$ npm install vuetify --save
# or
$ yarn add vuetify

Vuetify 가 설치되었다면, 어플리케이션의 메인 엔트리 포인트로 이동합니다. 대부분의 경우는 index.jsmain.js일 겁니다. 이 파일에서 Vuetify 를 임포트(import)하고 Vue에게 Vuetify를 사용하도록 지시해야합니다.

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

다음엔 Vuetify css 파일은 인클루드(include) 해야합니다. 간단하게 index.html 파일에서 include 하거나 실제 스타일러스(stylus) 파일이나 minified css 파일을 import 합니다.

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
// main.styl
@import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader

머티리얼 디자인 아이콘들을 include 하는 가장 쉬운 방법은 index.hteml 파일에 link 태그를 추가하는 것입니다.

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>

Alternatively use npm or yarn to install material-design-icons-iconfont.

// index.js or main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

경고: Vuetify 는 css 충돌을 최대한 줄이려고 노력하지만, Vuetify 를 기존의 프로젝트의 추가할때 당신의 커스텀 스타일들과 문제를 만들지 않을 거라고 보장하지는 못합니다.

IE11 & Safari 9 지원

프로젝트 디렉토리에 babel-polyfill을 설치하고 메인 엔트리에서 import 하세요

// my-project/
$ npm install babel-polyfill --save
// or
$ yarn add babel-polyfill

It is important to include the plugin as early as possible within your main index.js file. If using a Vuetify SSR package, this will apply to the client-entry.js file

// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()

인터넷 익스플로러 <template> 태그를 제대로 지원하지 못하기 때문에 항상 완전히 컴파일된 DOM 요소들을 브라우져로 보내야 합니다. This can be done by either building your Vue code in advance or by creating helper components to replace the dom elements. For instance, if sent directly to IE, this will fail:

$ yarn add @babel/preset-env -d
// or
$ npm install @babel/preset-env --save-dev

Once installed, add the preset to your .babelrc or babel.config.js

// .babelrc
{
  "presets": ["@babel/preset-env"]
}
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
}

Due to Internet Explorer's limited support for <template> tags, you must send fully compiled dom elements to the browser. This can be done by either building your Vue code in advance or by creating helper components to replace the dom elements. For instance, if sent directly to IE, this will fail:

<template slot="items" slot-scope="props">
  <td>{‌{ props.item.name }‌}</td>
</template>