javascript - 使用工厂模式引导 vuetify

Question

一段时间以来，我一直在尝试将我的应用程序从 vuetify 1.5 升级到 2，经过深思熟虑后，我认为问题是我的应用程序初始化方式导致了这个问题，我无法确定它到底是什么但是，问题是当我运行该应用程序时，我在控制台中收到错误，无法识别任何 vuetify 组件。附件是错误消息的屏幕截图。我的 main.js 文件:

import 'babel-polyfill' // IE support

import VueI18n from 'vue-i18n'
import {localizationFactory} from "./localization";
import {apiFactory, apiPluginFactory} from './api/api';
import {storeFactory} from "./store/store";
import {configServiceFactory} from "./services/configService";

import {Services, Security, Utils} from 'em-common-vue';

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {filtersFactory} from './filters/index';
import Vuetify from "vuetify/lib";

const appsService = new Services.appsService(process.env);
const loginDetails = {
  loginHost: appsService.getLoginStorage()
};

Security.ServiceFactory(loginDetails).then($security => {

  Vue.config.productionTip = false;

  Vue.use(Utils.EventBusPlugin);
  Vue.use($security);

  var vInstance = new Vue();
  const $api = apiFactory(vInstance, $security);

  configServiceFactory($security, $api).then($config => {
    Vue.use($config);
    Vue.use(apiPluginFactory($api));

    // for now
    const store = storeFactory($api, null);

    Vue.use(VueI18n);

    filtersFactory($config.$service);

    localizationFactory($config.$service).then(messages => {

      const i18n = new VueI18n({
        locale: 'en', // set locale
        messages, // set locale messages
      });
      Vue.use(Vuetify);

      let vuetify =  new Vuetify({
        icons: {
          iconfont: 'mdiSvg',
        },
      });
      new Vue({
        router,
        store,
        i18n,
        vuetify,
        render: h => h(App),

        computed: {

          title: {
            set(val) {
              document.querySelector('title').innerText = val;
            },
            get(val) {
              return document.querySelector('title').innerText;
            }
          }
        },

        mounted() {
          if (!document.querySelector('title')) {
            let title = document.createElement('title');
            document.head.append(title);
          }

          this.title = this.$config.get().title;
        }
      }).$mount('#app')
    });
  });

}).catch(err => {
  console.error(err);

  if (err.loginUrl) {
    const nextUrl = appsService.getLogin(window.location.href);
    window.location.href = nextUrl;
  } else { // for now
    alert(err);
  }
});

如何更改我的代码以正确加载 vuetify？或者，适合我的代码的模式可能是什么？

Answer 1

长话短说:

将 import Vuetify from "vuetify/lib"; 替换为 import Vuetify from "vuetify";

或者，如果您想使用 vuetify-loader :

• 将 vuetify-loader 添加到您的项目中(如果已经存在，请更新它)
• 如果您正在使用 webpack，请直接将 vuetify-loader 插件添加到您的 webpack 插件中:

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
exports.plugins.push(new VuetifyLoaderPlugin());

• 如果您使用@vue/cli 来设置您的项目，您可以使用configureWebpack vue.config.js 中用于添加插件的选项:

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}

为什么？

vuetify 有两种“风格”:

A-la-carte

所有 vuetify 组件都不会直接需要，只有在您显式导入它们时才会加载。
这大大减少了最终包的大小，因为您只包含了实际使用的 vuetify 框架部分。

如果你从 vuetify/lib 导入 vuetify，你正在使用 A-la-carte:

import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
const vuetify = new Vuetify({ /* ... */});
new Vue({vuetify}).$mount('#root');

a-la-carte 的缺点是你需要手动导入每个你想使用的 vuetify 组件:

import {VIcon} from "vuetify/lib";
export default {
  name: 'foo-component',
  components: { VIcon },
  template: '<v-icon>user</v-icon>'
};

为了减少麻烦，您可以:

• 使用 vuetify-loader，如果您设置正确，它会自动为您添加这些导入。
• 全局加载您经常使用的组件:

import Vue from 'vue';
import Vuetify, { VLayout } from 'vuetify/lib';
// globally register v-layout.
// now you don't need to import it in every component that uses it
Vue.use(Vuetify, { components: { VLayout } });

普通模式

如果您直接导入 vuetify，它会自动为您加载所有组件，无需进一步配置即可使用:

// not a-la-carte, will load all vuetify components
import Vue from "vue";
import Vuetify from "vuetify"; // **not** /lib
Vue.use(Vuetify);
const vuetify = new Vuetify({ /* ... */});
new Vue({vuetify}).$mount('#root');