f:id:yoshiki_utakata:20190104094113p:plain

はじめに

2018年8月にVue CLIのVersion 3が来ましたが、検索するとまだVue CLI 2の記事が多い。 npm install vue-cli とすると2系がインストールされてしまうのが罠でもある。Vue CLI 3を使ってみると、2よりかなり便利になっていると思ったので、Vue CLI 3を使ってみる。

インストール

Vue CLI 3 のインストール

以下でインストールできる。

npm install -g @vue/cli

Vue CLI 2をインストールしている場合

npm install -g vue-cli とすると、Vue CLI 2がインストールされてしまう。2がインストールされている場合は2をアンインストールしてください。

npm uninstall -g vue-cli

プロジェクトの作成

Vue CLI を利用する場合は基本的にはSPA（シングルページアプリケーション）を想定しています。

vue create <projectName>

いろいろ聞かれますので自分のお好みに設定してください。今回はyarnを利用することにします。

とりあえず動かす

yarn serve

サーバーが立ち上がってシングルページアプリケーションが動作します。

構成

public/index.html -- htmlファイル
src -- vueのソースが置かれるファイル

これだけおぼえておけばなんとなく書けます。

vue.config.js

いろいろな設定を書けます。vue createした直後には存在しないので、こいつにconfigかけるっていうのに気づきづらくて罠感があります。createしたプロジェクトのルートに置いて、以下のdevServerの設定の例のように書けば適用されます。分かりづらいです。

詳細な設定は公式のドキュメントを参考にしてほしいですが、便利な設定を一つだけ。

devServerの設定

module.exports = {
    devServer: {
        proxy: 'http://localhost:9000'
    }
}

これを書くと、index.html等以外のアクセスが localhost:9000 にプロキシされます。バックエンドのAPIをDjangoやRuby on Railsなどで動かしている時に利用できます。これさえ覚えておけば便利です。

公式ドキュメント

以下のページにconfigのリファレンスがあるので見るといいです。

cli.vuejs.org

ビルド

vue build すると dist ディレクトリにhtmlとjsとcssが書き出されて、これをデプロイすればアプリとして動きます。デフォルトだとファイル名にハッシュがくっついていたりしますが、設定 filenameHashing を false にするとハッシュがつかなくなります。

僕が使っている vue.config.js の設定は以下のとおりです。

module.exports = {
    filenameHashing: false,
    outputDir: './dist',
    lintOnSave: false,
    devServer: {
        proxy: 'http://localhost:9000'
    }
}