Question

我的应用正确封装了with rws as ( select 1 v, null related from dual union all select 2 v, 1 related from dual union all select 8 v, 1 related from dual union all select 3 v, 1 related from dual union all select 4 v, 2 related from dual union all select 5 v, 2 related from dual union all select 6 v, 3 related from dual union all select 7 v, 3 related from dual union all select 8 v, 4 related from dual union all select 8 v, 5 related from dual union all select 8 v, 6 related from dual union all select 8 v, 7 related from dual ), dfs ( v, related ) as ( select r.* from rws r where v = 1 union all select r.v, r.related from dfs d join rws r on r.related = d.v ) search depth first by v set seq, vals as ( select d.v, min ( seq ) min_s from dfs d group by v ) select listagg ( v, ',' ) within group ( order by min_s ) route from vals; ROUTE 1,2,4,8,5,3,6,7，并且我的vuetify选项在开发模式下运行正常，或者如果我使用<v-app>正常构建，例如。

vue-cli-service build

但是，如果我以库模式（例如：Vue.use(Vuetify, { iconfont: 'fa', theme: { primary: '#213e79', secondary: '#c0d8ed', accent: '#4ea3ed', error: '#b71c1c', info: '#2196f3', success: '#66bb6a', warning: '#f57f17' } });）构建，则将上述选项考虑为不。由于缺乏更好的解决方案，我不得不修改vue-cli-service build --target lib --name xxx。

任何想法可能是什么问题？如果您有任何解决方法，那就太好了：）

Answer 1

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

在主.vue文件中，导入Vuetify和您的Vuetify选项。然后，在组件声明中，只需包括一个vuetify属性，该属性将填充您导入的Vuetify实例。以下是Vuetify基本的“ Hello World”示例应用程序中的App.vue组件，对其进行了修改以兼容与导出为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'
  }
})

FOR 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'
    }
}

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

1 个答案: