Vuetify

상점

기업

세상에서 가장 유명한 Vue.js 프레임워크인 'Vuetify' 와 함깨 기능이 풍부하고 아주 빠른 앱을 만들어 보세요!

Vue CLI is the next generation cli tool made to abstract away the complexities of building an application. 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.

If you have not already created a new Vue.js project using Vue CLI, you can do so by typing:

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

Vuetify can also be installed using Vue UI, the new visual application for Vue CLI. Ensure that you have the latest version of Vue CLI installed, then from your terminal type:

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, search for Vuetify in the input field.

Vuetify 플러그인 설치하기

Vuetify는 Nuxt Vuetify 모듈 을 이용해 Nuxt 프로젝트에 추가할 수 있습니다.

설치 후, nuxt.config.js 파일의 'buildModules' 항목에 Vuetify 모듈을 아래와 같이 추가 해 주세요.

Nuxt 를 이용한 설치에 관한 더욱 많은 정보를 원한다면 Nuxt 공식 문서 를 참고하세요.

Vuetify 를 Webpack 프로젝트에 추가하기 위해선 몇가지 의존성들을 추가해야 합니다.

설치 후, webpack.config.js 를 연 후 아래의 코드조각을 rules 배열에 추가시켜 주세요. 만약 sass 룰이 이미 존재한다면, 아래 변경 코드 조각의 일부 또는 전부를 적용해야 할 수 있습니다. 조금 더 간결함을 위해 vuetify-loader 와 같은 유틸을 사용하고 싶다면 4 버전 이상의 Webpack을 사용하세요. Webpack 을 이용한 더욱 많은 설정 방법에 대해 알고싶다면 A-la-carte page 를 참고하세요.

Vuetify 플러그인 파일을 만들기 위해 아래의 코드조각을 src/plugins/vuetify.js 로 만드세요.

If using vuetify-loader use the content below:

설정된 Main Entry Point(보통 src/main. js) 로 이동하여 Vuetify object를 Vue 인스턴스에 옵션으로 추가 하세요.

Vuetify 는 Google's Roboto fontMaterial Design Icons 를 사용합니다. 가장 쉬운 설치방법은 index.html (보통 public/index.html)에 폰트 CDN 들을 추가하는것 입니다.

Vue CLI 를 통한 설치 없이 직접 Vuetify.js 를 테스트 하고 싶다면, 아래의 코드 조각을 index.html 에 직접 추가 해 주세요. 이것으로 여러 컴포넌트들이 사용가능한 최신버전의 Vue와 Vuetify가 설치될 것입니다. 또한, Vuetify starter 를 이용해 Codepen 위에서 테스트 해볼 수 있습니다. 배포 환경에선 CDN 패키지를 추천하진 않습니다만 필요하다면 사용하는 에셋들의 버전을 명시해주는것이 유리합니다. 이것에 대하여 더 알고싶다면 jsdelivr 웹사이트를 참고하세요.

To use Vuetify with Electron, add the electron-builder plugin via Vue CLI.

If you are creating a new app with Vue CLI, you have the option to select Progressive Web App (PWA) Support in the first prompt after initiating vue create my-app. This package can also be installed into existing Vue CLI projects by entering the following command:

To use Vuetify with Cordova, add the Cordova plugin via Vue CLI:

To use Vuetify with Capacitor, add the Capacitor plugin via Vue CLI:

Looking for Web Developer jobs? Try Jooble

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!