第一天之导入Vuetify的坑

Webpack导入Vuetify的坑

对于一般的官网创建来说是这样的：

$ vue create day01
// navigate to new project directory
$ cd day01
$ vue add vuetify

对于vuetify的使用很便捷 不过对于小白的我来说更喜欢Webpack----部署快

对于Webpack来说：

vue init webpack day01
 
cd day01
 
npm install vuetify --save

大概来看是没啥问题 但是当我一运行时总会控制台报错

[Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object"

found in

---> <VApp>
       <App> at src/App.vue
         <Root>
    ..................一大堆东西

大概意思就是我的Vuetify配置的不行 然后吐血般的找了一天 差点从入门到放弃 转身投奔到layui的怀抱

后面无意之间比较了一下两种方法创建的main.js

Webpack创建的
new Vue({
  el: '#app',
  router,
  Vuetify,
  components: { App },
  template: ''
})

官方文档创建的：
new Vue({
  router,
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

改变之后的main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify)
export default new Vuetify({})

/* eslint-disable no-new */
new Vue({
  router,
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

成功了，愉快的使用vuetify！