时间戳

首页 > 解决方案 > 使用工厂模式引导 vuetify

javascript - 使用工厂模式引导 vuetify

问题描述

我一直在尝试将我的应用程序从 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？或者，什么可能适用于我的代码的模式？

错误信息

标签： javascriptvuejs2vuetify.jsfactory-pattern

解决方案

TL;博士：

如果您想使用vuetify-loader ，请替换import Vuetify from "vuetify/lib";为Alternative ：import Vuetify from "vuetify";

  • 将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有两种“口味”：

点菜

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

如果您从以下位置导入 vuetify，则您正在使用A-la-cartevuetify/lib：

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');

推荐阅读