こんにちは。かくすけです。
今回もかくすけWebページのお話です。

前回はVue-CLI-3を使ってVue.jsのWebアプリケーションを作成しました。

kakusuke98.hatenablog.com

今回はVuetifyというUIフレームワークを導入します！
前回はそのためにVue-CLI-3を入れました。

私は基本的にBootstrapを使っているのですが、せっかくVueに挑戦しているわけですから、 Vueベースのものを使おうと考えてVuetifyを選びました。

参考にさせていただくページはこちら！ありがとうございます！！

techblog.kayac.com

?  Running completion hooks...

?  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     src/assets/logo.svg
     src/plugins/vuetify.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js

   You should review these changes with git diff and commit them.

え！もう完了！？
Vue-CLIのすばらしさを実感しました。

babel-polyfillを読み込む

参考にしたページによるとこれをしないとIE11などで真っ白な画面になるそうなので、素直に読み込みます。

vue add vuetify

jsファイル内で読み込み指定

import Vue from 'vue'
import './plugins/vuetify'
import 'babel-polyfill'   // これ
import App from './App.vue'

Vue.config.productionTip = false

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