25 vue vuetify

source: categories/study/vue-experiance/vue-experiance_9-15.md

25. vue vuetify

• slider

vuetify 활용하면 어려운 컴포넌트도 쉽게 적용할 수 있을듯하다!!! 아주 든든한 지원군!!

vuetify 설치 명령어 - 기존 플젝에 vuetify 설치하는거라면!?

공식문서에 있는대로하면된다.
아래 명령어 입력하면 자동으로 설치가된다.

vue add vuetify

그런데 파일이 자동으로 바뀌는게 있으므로 그건 이전 버전으로 돌려주자.
돌려줄 때 변경사항 중에 꼭 필요한 부분은 남기면서 이전 버전으로 돌리자.
대략 아래 내용들은 적용이 필요했다.
적용을해야 vuetify 컴포넌트들이 제대로 작동한다.
즉, 아래 내용들은 유지한채 이전 버전으로 돌리자.

vuetify overriding 이슈 해결 vue.config.js

// ...
const autoprefixer = require('autoprefixer')
const filterRules = require('postcss-filter-rules')

module.exports = {
  // ...
  css: {
    sourceMap: true,
    loaderOptions: {
      postcss: {
        plugins: [
          filterRules({
            filter: (selector) => {
              // const re = new RegExp(/^(html|body|\*|ul|ol|select|small)(\W|$)/, 'i')
              const exception  = '.v-application'
              // return !re.test(selector) || !selector.includes(exception)
              return !selector.includes(exception)
            },
            keepAtRules: true
          }),
          autoprefixer
        ]
      }
    },
  },
  productionSourceMap: false,
  transpileDependencies: [
    ansiRegex,
    'vuetify'
  ],
  // ...
}

src/App.vue

<template>
  <v-app :id="'v-app'">
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

src/main.js

import vuetify from './plugins/vuetify'

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