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,
},
...
최초의 촉감으로서 지금까지 할 수 있다면 이행은 시야에 들어갈 수 있을까라는 느낌
Reference
이 문제에 관하여(Vuetify2.0의 베타 버전을 사용해보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shikigamix/items/d3130e652d53bb4c910b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)