【学習記録】Buefyのリポジトリ見て勉強

BuefyのGitHubリポジトリのソースコード読んで発見したことを自分用にメモします。
勉強になるポイントがたくさんあって素晴らしいです。
リポジトリはこちらです。

github.com

ディレクトリ構造

src配下に実際のBuefyのソースコードが格納されていて、docs配下に公式ドキュメントのコードが格納されているっぽい。
ローカルにBuefyのリポジトリをGitクローンしてnpm run devすると公式ドキュメントと同様のページがローカルで立ち上がるので、docs配下のコードを変更して動きを確かめることができる。

cypress配下はテストコードがある。

router/index.jsの書き方が見やすい

docs/router/index.jsに公式ドキュメントのルーティング処理がまとまっているのですが、その書き方が綺麗でした。

自分の書き方ではrouterに渡したいコンポーネントをまずimportしてそのあとrouterに渡しているのでひとつのコンポーネントを2度記述していました。

import LoginPage from '@/views/LoginPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: LoginPage,
|
|

上記の方法だとコンポーネントの数が少ない間はそこまで見づらくないですが、コンポーネントが増えると大変そうです。

Buefyでは以下のようにroute()という関数を作って冗長にならないように書いてました。

Vue.use(VueRouter)

function route(path, component) {
    return {
        path,
        name: path,
        meta: routes[path],
        component: () => import(`@/pages/${component}`)
    }
}

// Templates
const Documentation = () => import('@/templates/Documentation')
const NotFound = () => import('@/pages/404')

const router = new Router({
    mode: 'history',
    linkActiveClass: 'is-active',
    base: __dirname,
    routes: [
        route('/', 'Home'),
        {
            path: '/',
            component: Documentation,
            children: [
                // Documentation
                route('documentation', 'Documentation'),
                route('documentation/start', 'installation/Start'),
                route('documentation/customization', 'installation/Customization'),
|
|
|

この書き方ならroute関数の中でimport処理を書いているのでかなりコードの記述量を削減できそうです。
importなどはロジックにも直接は関係しないはずなので、こういった書き方でまとめれるとコードが見やすくなって良いなと思いました。

こんな感じの良いコードが随所にあったのでもっとBuefyのリポジトリ読み込んで参考にしていきたいと思います。