vue-cli库构建中未考虑的Vuetify选项

当Vue CLI的构建目标为时lib，main.js不使用您的原始入口点（例如）。Vue CLI文档中描述了此行为。该入口点文件通常是Vuetify插件的导入位置。要解决此问题，只需将Vuetify的导入移动到.vue项目的主要组件中。这通常称为App.vue，但是如果您没有使用CLI来搭建项目的脚手架，则可能会有另一个名称。

在主.vue文件中，导入Vuetify和您的Vuetify选项。然后，在组件声明中，只需包括一个vuetify使用导入的Vuetify实例填充的属性。以下是App.vueVuetify的基本“ Hello World”示例应用程序中的组件，已对其进行了修改以兼容导出为lib：

<script>
import HelloWorld from './components/HelloWorld';

import vuetify from './plugins/vuetify'     //IMPORT THE VUETIFY CONFIG FILE

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),

  vuetify, //ADD IT TO THE COMPONENT DECLARATION
};
</script>

更新：

为了使用Vuetify 2.x在组件中加载Vuetify，Vuetify插件文件应遵循以下模式：

import Vue from 'vue'
import Vuetify from 'vuetify';
import '@/assets/stylus/main.styl';

Vue.use(Vuetify)

export default new Vuetify ({
  iconfont: 'fa',
  theme: {
    primary: '#213e79',
    secondary: '#c0d8ed',
    accent: '#4ea3ed',
    error: '#b71c1c',
    info: '#2196f3',
    success: '#66bb6a',
    warning: '#f57f17'
  }
})

适用于VUETIFY 1.5.x

使用Vuetify 1.5.x代替Vuetify 2.x时有一些区别。

首先，没有必要在组件声明中包含vuetify对象。您仍然应该导入./plugins/vuetify文件。

其次，必须在beforeCreate生命周期挂钩中分别配置主题和图标。这是一个例子：

beforeCreate() {

    //Override the default icons with the Font-Awesome preset
    this.$vuetify.icons = {
      'complete': 'fas fa-check',
      'cancel': 'fas fa-times-circle',
      'close': 'fas fa-times',
      'delete': 'fas fa-times-circle', // delete (e.g. v-chip close)
      'clear': 'fas fa-times-circle', // delete (e.g. v-chip close)
      'success': 'fas fa-check-circle',
      'info': 'fas fa-info-circle',
      'warning': 'fas fa-exclamation',
      'error': 'fas fa-exclamation-triangle',
      'prev': 'fas fa-chevron-left',
      'next': 'fas fa-chevron-right',
      'checkboxOn': 'fas fa-check-square',
      'checkboxOff': 'far fa-square', // note 'far'
      'checkboxIndeterminate': 'fas fa-minus-square',
      'delimiter': 'fas fa-circle', // for carousel
      'sort': 'fas fa-sort-up',
      'expand': 'fas fa-chevron-down',
      'menu': 'fas fa-bars',
      'subgroup': 'fas fa-caret-down',
      'dropdown': 'fas fa-caret-down',
      'radioOn': 'far fa-dot-circle',
      'radioOff': 'far fa-circle',
      'edit': 'fas fa-edit',
      'ratingEmpty': 'far fa-star',
      'ratingFull': 'fas fa-star',
      'ratingHalf': 'fas fa-star-half'
    }

    //Override the theme colors.
    this.$vuetify.theme = {
        primary: '#213e79',
        secondary: '#c0d8ed', 
        accent: '#4ea3ed',
        error: '#b71c1c',
        info: '#2196f3',
        success: '#66bb6a', 
        warning: '#f57f17'
    }
}