VueCLIを使わずにauto-routingする

この記事はVue.js #2 Advent Calendar 2018の10日目の記事です。

皆さんVueCLIつかってますか？
あるいはNuxtを使っていますか？

新しいプロジェクトならぜひとも新しい技術を試してみたいものです。
しかし、実際の開発現場に新しい技術やパラダイムを持ち込むのは簡単ではありません。
VueCLIやNuxtまで落とし込めない状況もあります。

例えば、すでに動いているサービスに検証として一部Vueのパラダイムを持ち込む、など。

VueCLIやNuxtの導入までいければ楽なんですけど、
一度にたくさんのパラダイムを持ち込みすぎるとキャッチアップのコストも高いですし、段階的に導入していきたいという要望もあります。

それでも僕はVueRouterを自動生成したい！

そこで、今回はVueCLIやNuxtを使わずにVueRouterでauto-routingする方法をご紹介します。

vue-cli-auto-routing

vue-cli-auto-routing は
Nuxtの自動ルーティング、及びレイアウトの機能をVueで実現するためのVueCLIプラグインです。

内部的には以下のモジュールから構成されていて、VueCLIを使わずともWebPackでバンドルできるようになっています。

• vue-router-layout
• vue-auto-routing
• vue-route-generator

いまはまだNuxtを導入するか、VueCLIを導入するか決めかねているけど取り急ぎこの仕組が欲しいって方は、
これらをnpm installして設定を追加するだけでNuxtのディレクトリ構成とアーキテクチャで実装が可能です。

実装方法

ディレクトリ構成

こんな感じでディレクトリを組むとします。

+- src/
  +- layouts/
  +- pages/
  +- App.vue
  +- router.js
  +- index.js
+- webpack.config.js
+- package.json

installation

npm install --save vue-auto-routing vue-router-layout

webpackの設定

• vue-router-layoutとvue-auto-routingでNuxtで

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin')

module.exports = {
  entry: { /* your setting */ },
  output: { /* your setting */ },
  module: { /* your setting */ },
  resolve: {
    // importPathが`@/pages/`なのでnuxtと同じaliasを用意する
    alias: {
      "~": path.join(srcDir),
      "~~": path.join(rootDir),
      "@": path.join(srcDir),
      "@@": path.join(rootDir)
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new VueAutoRoutingPlugin({
      // `pages`のディレクトリパス
      pages: `src/pages`,
    }),
  ]
}

router.jsの設定

ここでLayoutとRouterの設定を行う。

router.js

import Vue from "vue";
import Router from "vue-router";
import routes from "vue-auto-routing";
import { createRouterLayout } from "vue-router-layout";

Vue.use(Router);

const RouterLayout = createRouterLayout(layout => {
  return import("@/layouts/" + layout + ".vue");
});

export default new Router({
  routes: [
    {
      path: "/",
      component: RouterLayout,
      children: routes
    }
  ]
});

layoutの作成

src/layouts/default.vue

<template>
  <article>
    <header>
      <h1>example layout</h1>
    </header>
    <div class="body">
      <router-child />
    </div>
  </article>
</template>

pagesの作成

src/pages/index.vue

<template>
  <p>hello auto routing</p>
</template>

<script>
export default {
  layout: 'default' // default
}
</script>

buildの実行

npx webpack --config webpack.config.js

まとめ

今回は、限られた環境を打開する一つの手段として、vue-auto-routing及びvue-router-layoutの使い方をご紹介しました。
便利なツールをつかってよりすばやく価値をデリバリーできる環境を作っていきましょう

なお、今回のコードは以下にサンプルを置いてます。
https://github.com/rymizuki/example-vue-auto-routing