Vuetify2.0의 베타 버전을 사용해보십시오.

Vuetify2.0을 시험해 보았을 때 Vuetify1.5계의 코드를 가지고 가면 전혀 움직이지 않았기 때문에 Vuetify2.0을 사용하는데 있어서 재작성해야 할 부분을 현시점에서 조사가 가능한 범위에서 리포트

공식 문서



우선 이것이 전혀 참고가 되지 않는 것이 큰 관문. 사이트 도메인은 next.vuetifyjs.com이 되어 있지만 아무래도 그 내용의 대부분은 1.x계의 내용의 카피로부터 업데이트되지 않은 모습

github 출시 노트



분명히 이것이 정규 이후 가이드 패턴
const opts = { ... }
-Vue.use(Vuetify, opts)
+Vue.use(Vuetify)
-new Vue(...).$mount('#app')
+new Vue({
+  vuetify: new Vuetify(opts)
+}).$mount('#app')

이런 식으로 옵션 정보를 지정하는 방법을 변경하십시오.

또한 테마에 대해서도
const opts = {
-  dark: true,
  theme: {
-    primary: '...',
+    dark: true,
+    themes: {
+      light: {
+        primary: '...',
+        ...
+      },
+      dark: {
+        primary: '...',
+        ...
+      }
+    }
  }
}

처럼 primary 등의 정의는 themes > light, dark 안에 정의하라는 것

그러나 이것도 잘하지 않습니다.
브라우저 콘솔에서 오류를 확인한 결과 v-app가 정의되지 않은 것 같은 오류

github 출시 노트에 도착하기 전에 시도했습니다.
  components: {
    VApp,
  },

opts에 추가 해 보겠지만 이것도 안됩니다.

라고 할까 실은 이 서식은 Vue.use(Vuetify...에 이하와 같이 배치했을 경우 theme 칼라는 사용할 수 없었지만
버튼 표시까지는 되어 있었으므로 다시 components만 이쪽으로 이동
Vue.use(Vuetify, {
  components: {
    VApp,
  },
}

전체적으로 다음과 같이 쓰면 작동했습니다.

main.js
import Vue from 'vue'
import App from './App.vue'
import colors from 'vuetify/es5/util/colors'
import 'vuetify/dist/vuetify.min.css'

import Vuetify, {VApp,VBtn} from 'vuetify/lib'
const VuetifyComponents = {
  components: {
    VApp, VBtn,
  },
}

Vue.use(Vuetify, VuetifyComponents)

const opts = {
  theme: {
    dark: false,
    themes: {
      light: {
      },
      dark: {
      }
    }
  }
}

new Vue({
  vuetify: new Vuetify(opts),
  render: h => h(App),
}).$mount('#app')

App.vue
<template>
  <v-app>
    <div class="text-xs-center">
      <v-btn color="primary">Primary</v-btn>
      <v-btn color="secondary">Secondary</v-btn>
      <v-btn color="accent">Accent</v-btn>
    </div>
  </v-app>
</template>

opts.theme.dark===false의 경우


opts.theme.dark===true인 경우


opts.theme.dark===false로 themes를 다음과 같이 바꾸어 보았을 경우
    themes: {
      light: {
        primary: colors.green.base,
        secondary: colors.green.darken4,
        accent: colors.purple.base,
      },
...



최초의 촉감으로서 지금까지 할 수 있다면 이행은 시야에 들어갈 수 있을까라는 느낌

좋은 웹페이지 즐겨찾기