Vuetify 2.2의 새로운 기능 Presets
Vuetify v2.2.0 Release
Presets 기능이란?
Google이 책정하는 디자인 가이드라인 Material Design 에서 작성된 Material studies 을 preset의 스타일로 준비해 주는 기능입니다.
공식 문서 : Vuetify Customization/Presets
아래는 릴리스 페이지에 게재된 프리셋 기능의 샘플입니다.
Material studies란?
Material studies 은 레시피 앱 , 금융 앱 , 교육 앱 등 보다 구체적인 어플리케이션의 디자인 예와 함께, 그 디자인의 이론적 근거나 컴퍼넌트 선택에 대해 상세히 설명한, Material Design 을 배우는데 매우 유용 콘텐츠가되고 있습니다.
요컨대
Material studies의 앱 디자인을 Vuetify에서 멋지게 시도 할 수있는 기능
사용법
Preset은 Vue CLI의 플러그인으로 구현되므로 Vue CLI를 사용하여 추가합니다.
이용 방법은 vuetifyjs/vue-cli-plugins 리포지토리에 정리되어 있으므로, 그쪽도 참조해 주세요.
Vue CLI 설치
설치된 분은 건너뜁니다.
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
참고 : Vue CLI Getting Started
Preset Rally 사용해보기
# プロジェクト作成
$ vue create my-app
$ cd my-app
# vuetifyをプロジェクトに追加
$ vue add vuetify
# 任意のpresetを追加
# 今回はrallyを選択
$ vue add vuetify-preset-rally
# 起動して確認
$ yarn serve
기동하면, 아래와 같은 느낌으로 스타일이 적용되고 있는 것을 알 수 있습니다.
색상과 글꼴이 변경되었습니다.
일부 컴포넌트의 스타일도 변경된 것처럼 보이지만, 컴포넌트를 직접 추가하지 않으면 모르는 것 같습니다.
무슨 일이야?
vue add vuetify-preset-rally에 의해 발생한 차이는 다음과 같습니다.$ git status
modified: package.json
modified: public/index.html
modified: src/plugins/vuetify.js
modified: yarn.lock
public/index.html 의 diff 는 아래와 같이 font가 추가되었습니다.public/index.html
diff --git a/public/index.html b/public/index.html
index 2545523..ae2a70f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
<title>my-app</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,500,700:100,300,400,500,700,900|Eczar:400:100,300,400,500,700,900&display=swap">
</head>
<body>
<noscript>
src/plugins/vuetify.js 에 관해서는, 모듈을 import 해, vuetify 에 건네주는 구현이 추가되고 있었습니다.src/plugins/vuetify.js
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index ec46adb..c14a53a 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,7 +1,9 @@
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
+import { preset } from 'vue-cli-plugin-vuetify-preset-rally/preset'
Vue.use(Vuetify);
export default new Vuetify({
+ preset,
});
여기에서 이용되고 있는
vue-cli-plugin-vuetify-preset-rally 의 구현은 아래와 같습니다.htps : // 기주 b. 코 m / ゔ 에치 fyjs / ゔ 에- c ぃ- p ぅ 긴 s / t 에 / ms r / pac 케이 s / ゔ 에- c ぃ p - 라일
preset 디렉토리 안의 구현을 보면, index.js 에 의한 theme의 칼라의 설정이나, scss 와 sass 에 의한 스타일의 override가 구현되고 있습니다.이것에 의해, Material studies 의 스타일이 Vuetify 에 적용되는 구조가 되고 있습니다.
override 하고 있는 style의 수는 그다지 많지 않지만, Release 페이지에서도,
features are not supportable at this time.
라고 쓰여져 있으므로 앞으로 기대합니다.
도전
Nuxt.js의 몸과 어떻게 Presets를 추가해야하는지 괴롭습니다.
개인적으로 Vuetify를 사용하는 경우, 세트로 Nuxt.js를 이용하는 경우가 많습니다.
Nuxt.js는 공식 권장 절차이며
yarn create nuxt-app 명령을 사용한 초기화 절차이며 Vue CLI를 사용하지 않습니다.그 때문에,
vue add 에 의한 plugin의 추가에 대응하고 있지 않기 때문에, Presets를 어떻게 추가하는지가 괴롭습니다.2020/02/05 추가
지정하는 기능은 들어있는 것 같습니다만, 지금 제대로 동작하지 않는 것 같습니다.
htps : // 기주 b. 코 m / nxt
지정은 아래와 같이
nuxt.config.js 안에서 실시한다고 생각합니다만, 에러가 됩니다.js:nuxt.config.js
vuetify: {
preset: 'vue-cli-plugin-vuetify-preset-rally/preset'
},
요약
바삭바삭하게 앱을 만들 때 배색으로 고민하는 경우가 많기 때문에, 이러한 간단하게 이용할 수 있는 preset가 있는 것은 개인적으로 기쁩니다.
또한 Vue CLI 이외의 설치 방법에 대해서는 앞으로 기대할 것입니다.
Reference
이 문제에 관하여(Vuetify 2.2의 새로운 기능 Presets), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reireias/items/8ef1c08c70f410e61efa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
