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

지원하는 브라우져

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

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

새로운 어플리케이션

Vue CLI 3 은 이전 보다 더욱 쉽게 시작할 수 있도록 도와주기 위해 만들어진 다음 세대의 cli 툴 입니다. Vue CLI 3를 가지고 당신의 앱을 시작하면 힘든 업데이트 절차 없이 Vuetify 의 업데이트는 물론이고 공식적인 웹팩 업데이트와 config 변경사항들을 얻을 수 있습니다.

Cli 가 설치되고 나면, 당신은 새로운 프로젝트 스케폴드를 생성할 수 있습니다. 특별히 포함해야할 패키지들(예를들면 vuexvue-router)이 존재하지 않는다면 default install 을 선택하세요. 이것은 당신이 선택한 옵션들과 함께 시작할 준비가된 새로운 Vue 프로젝트를 생성합니다.

: 만약 이미 Vue CLI 가 설치되어 있다면, 터미널에서 vue --version 명령을 입력해 최신 버전이 설치되어 있는지 확인할 수 있습니다.

이제 프로젝트가 초기화 되었으므로, cli 를 사용해서 Vuetify 패키지 를 추가할 수 있다.

이것은 설치를 위한 몇 가지 옵션을 제공한다. a-la-carte 을 가진 기본 프리셋이 이미 활성화 되어있다.

설치가 완료된 후에 간단하게 yarn serve 혹은 npm run serve 명령을 실행하여 어플리케이션을 시작한다.

Vue UI Install

Vuetify 는 _@vue/cli_를 위한 새로운 비주얼 어플리케이션인, Vue UI 를 사용해서도 설치 할 수 있다. 최신 버전의 Vue CLI 가 설치되어있는지 확인하고 터미널에서 다음을 입력한다:

This will start the Vue User Interface and open a new window in your browser. On the left side of your screen, click on Plugins. Once navigated, simply search for Vuetify in the input field.

Install Vuetify Plugin

After installation, you will have the option to configure your application's default Vuetify settings.

Configure your Vuetify installation

기존 어플리케이션

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

For a detailed explanation of how to get npm running in your environment, check out the official npm documentation. Alternatively, if you wish to use yarn, you can find more information on the official yarn documentation. Once setup, you can run either command from the cli.

Once Vuetify has been installed, create a folder within you src directory called plugins. Inside, add a vuetify.js file. This is where we will handle all of our bootstrapping and setup of Vuetify for your project.

default installation

There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size and is setup you will see in a new vue-cli-3 project. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.

If there is a reason you are unable to utilize the Vue CLI 3 package, you can manually install the vuetify-loader through your vue.config.js or webpack config. For more information on manual installation, navigate to the A-la-carte page.

vue-cli a-la-carte installation

You can also manually import individual components without the need for the vuetify-loader. This is considered manual A-la-carte.

vue-cli full installation

The last method will import and setup all of Vuetify's features and styles. As stated above, it is still recommended that you utilize the vuetify-loader if at all possible. For this install, you will need to manually import the Vuetify styles. This is also the process used when bootstrapping Vuetify through a browser as opposed to compiling. You can observe the browser installation in our cdn quickstart.

Webpack installation

When using webpack, you have the ability to setup your application with either of the above options (Full or A-la-carte install). However, you will need to add a webpack rule (or modify an existing one) for sass files. You can start by installing the necessary dependencies:

Once installed, locate your webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are you looking to utilize the vuetify-loader as well, you can find more information on setting it up with webpack on the A-la-carte page.

If you are using version v8 of the sass-loader, you will need to change your options object.

Bootstrapping the Vuetify Object

Once you have setup your initial Vuetify options in your src/plugins/vuetify.js file, you must then pass that object into your main Vue instance options. This install process is similar to vue-router and vuex

Font Installation

Vuetify uses the Google Roboto font per the Material Design Specification. The easiest way to use this font is by add a <link> element in the <head> of your main index.html.

You can also asynchronously load the fonts by using the webfontloader.

MDI Iconfont

Vuetify uses Material Design Icons as its default iconfont. The simplest way to install it is through npm.

Once the package is installed, simply import it into the vuetify.js file in your plugins folder.

For more information on different support iconfonts and advanced implementations, navigate to the Icons page.

CDN usage

To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your index.html. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the Vuetify starter on codepen. While not recommended, if you need to utilize the cdn packages in a production environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the jsdelivr website.

IE11 & Safari 9 지원

Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11 and Safari 9/10. If you are using Vue CLI 3, this is done automatically for you. Otherwise, in your project directory, you can install babel-polyfill:

인터넷 익스플로러 <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:

It is recommended that you use babel-preset-env with the corresponding polyfill to ensure only the necessary polyfills are added to your application. For more information on babel-preset-env, visit the documentation

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

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:

Edit this page on Github | Translate on Crowdin
Vuetify
상점기업