@fanswoo/component-loader NPM

`@fanswoo/component-loader`

介紹

本套件用途是讓 webpack 可以透過指定資料夾快速加載大量 Vue 組件。

使用方法

透過 import 語句引入 ComponentLoader 後，將根據 @/config/component-loader.js 檔案取出指定條件下的所有組件。

import Vue from 'vue';
import _ from 'lodash';
import { ComponentLoader } from '@fanswoo/component-loader/main';

export default class RouteModalSwitch extends Vue {
  // ...
  created() {
    const componentLoader = new ComponentLoader([
      {
        pageName: 'admin',
        themeName: 'page',
        typeName: 'layout',
      },
    ]);
    _.merge(this.$options.components, componentLoader.loadComponents());
  }
  // ...
}

config 設置

本套件將自動讀取 @/config/component-loader.js 位置的檔案作為設置檔。

import { RequireLoader } from '@fanswoo/component-loader/main';

const config = {
  requireLoader: () => {
    const requireLoader = new RequireLoader();

    return requireLoader
      .requirePath(
        '@/layout', require.context('@/layout', true, /\.vue$/),
      );
  },
  componentPages: [
    {
      name: 'admin',
      componentThemes: [
        {
          name: 'page',
          componentTypes: [
            {
              name: 'layout',
              components: [
                {
                  name: 'HeaderBar',
                  path: '@/layout/header-bar.vue',
                },
              ]
            }
          ]
        }
      ]
    },
    {
      global: true,
      componentThemes: [
        {
          name: 'page',
          componentTypes: [
            {
              name: 'layout',
              components: [
                {
                  name: 'FooterBar',
                  path: '@/layout/footer-bar.vue',
                },
              ]
            }
          ]
        }
      ]
    }
  ]
};