Vue.js vue-routerのページに対してコンポーネントを大量に読み込むのがつらい問題を解消する ref: http://qiita.com/potato4d/items/a82be294225cea2ead8b

CompA.vue

<template lang="html">
    <p>Hello.</p>
</template>

<style lang="css"></style>

<script>
module.exports =  {};
</script>

file0.txt

/index.js

/components/
 |
 +--- CompA.vue
 |
 +--- CompB.vue

/pages/
 |
 +--- PageA.vue
 |
 +--- PageB.vue // 今回は使いません

index.js

const Vue = require("vue");
const VueRouter = require("vue-router");
Vue.use(VueRouter);

const App = Vue.extend(require("./App.vue"));
const router = new VueRouter();
const Components = {};
const getComponents = c => Object.assign(c, {"components": Components});

// コンポーネント読み込み

Components["CompA"] = require("./components/CompA.vue");
Components["Btn"]   = require("./components/Btn.vue");
Components["Flash"] = require("./components/Flash.vue");
Components["Modal"] = require("./components/Modal.vue");

// ページ読み込み


const PageA = Vue.extend(getComponents(require("./pages/Page.vue")));

// ルーティング

router.map({
    "/b": {
        component: PageA
    },

    "/b": {
        component: PageB
    }
});

router.start(App, "#app");

PageA.vue

<template lang="html">
    <comp-a />
    <btn />
    <flash />
    <modal />
    <!-- すべて使える！ -->
</template>

<style lang="css">
</style>

<script>
module.exports = {};
</script>