Web猫ブログ
CakePHPにVue導入 - つなぎ込み導入編
CakePHPにVue導入 - つなぎ込み導入編
07月 16日

初めて Vue CLI を採用

これまでにお仕事で Vue CLI をベースに使った場面は無く、今回 CakePHP のフロントエンドに Vue CLI を組み込んだ経験を中心に記録します。

Vue CLI 導入編

新たに frontend ディレクトリを準備します。

# Vue CLI
vue create frontend

具体的なインストール方法は割愛します。

vue-cli installation

ルートディレクトリに今回の主役である vue.config.js を置きます。

module.exports = {
    // 必要に応じて追加します
}

今回はエントリーポイントや出力先などを別途設定する必要があります。

pages: {
    index: {
        entry: './frontend/src/main.ts',
        template: './frontend/public/index.html',
        filename: 'index.html',
        chunks: [
            'chunk-vendors',
            'chunk-common',
            'index'
        ]
    }
}

起点となるパスも設定しておきましょう。

configureWebpack: {
    resolve: {
        alias: {
            '@': path.join(__dirname, 'frontend/src/')
        }
    }
}

PHP側からレンダリングされるよう、今回は webroot/dist に置くことにしましょう。

chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        config.output.filename('[name].js')
        config.output.chunkFilename('js/[name].js')
    }
}

また下記のようにハッシュ値を付けずにトランスパイルすることも可能です。基本的にプロジェクト次第ですが、ハッシュ値を付けない方が実は都合が良くなるかもしれません。

これで PHP側でレンダリングする準備は整いました。

最後に、

PHP側でルーティングが既に存在していましたが、順当に vue-router を採用。 frontend/main.ts 内でサーバサイドのルーティングに合わせたルーティングリストを準備しています。

<div id="app">
    <router-view/>
</div>

.tpl に実DOMを配置することで、無事「仮想DOM」としてレンダリングされることを確認しましょう😋

今後も必要に応じて共有していきたいと思います。

コメントを残す

あわせてよみたい..

-----