既存のRailsプロジェクトにVue.jsを導入する

RailsでWebアプリケーションを開発し始めたが、フロント開発にVue.jsを使ってみたくなった。
既存のRailsプロジェクトにVue.jsを導入する方法を調べたものの、意外と手強かったので備忘録として残しておく。
 

環境

• Ubuntu 16.04.4 LTS
• ruby 2.5.0
• Rails 5.0.7

手順概要

• Node.jsのインストール
  • nvmのインストール
  • Node.jsのインストール
• npmのアップデート
• webpackerのRailsへのインストール
• Yarnのインストール
• webpackerのインストール
• Vue.jsのインストール
• webpackerのファイルを使用できるようにする
• トラブルシューティング

Node.jsのインストール

nvmを使ってインストールしようとしたが、自分のマシンに入っていなかったので、まずはそこから。

nvmのインストール

まずはソースパッケージをビルドするために必要なパッケージをインストール

sudo apt-get update 
sudo apt-get install build-essential libssl-dev

完了したら以下を参考にインストールスクリプトを実行

github.com

2019/09/25 現在

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

インストールが完了すると、 ~/.bash_profile , ~/.zshrc, ~/.profile のいずれかに修正が入るので、一旦ターミナルを再起動する

Node.jsのインストール

nvm ls-remote

でインストール可能なNode.jsのバージョンを確認可能です。
以下の公式サイトで最新版を確認できます。

https://nodejs.org/ja/

当記事執筆時点で最新は 8.12.0 なので、以下のコマンドを実行しNode.jsをインストール。

nvm install 8.12.0

npmのアップデート

以下のコマンドを実行

npm update -g npm

webpackerのRailsへのインストール

Gemfile内に以下の記述を追加。

gem 'webpacker'

追加後、bundle install

bundle install

Yarnのインストール

以下のコマンドを実行。

npm i -g yarn

webpackerのインストール

webpackerをインストールするために、以下のコマンドを実行。

bundle exec rake webpacker:install

Vue.jsのインストール

いよいよVue.jsをインストール。
以下のコマンドを実行。

bundle exec rake webpacker:install:vue

このときに、vue-loaderのバージョンについて聞かれるかもしれないが以下の公式サイトを確認して、適切なバージョンを確認する。

www.npmjs.com

webpackerのファイルを使用できるようにする

app/view/application.html.erb内に以下の記載を追加する。

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

サーバー起動

rails sを実行
ブラウザのコンソールに

Hello world form Webpacker

と表示されていれば完了です。

トラブルシューティング

rails sを実行してコンソール確認しても、上記の文字列が表示されていない場合がある。
こういう時は一旦ターミナル上でVueのコンパイルをしてみる。

bundle exec rake webpacker:compile

そうするとエラーでコンパイルできないはず。

コンパイルできないパターンとして把握しているのは以下のみ。

Module build failed: ReferenceError: Unknown plugin "@babel/plugin-transform-destructuring" specified in ・・・

• 対処法
  自分のアプリケーションフォルダ内にある .babelrc/ を削除する。

rm -rf /RailsプロジェクトのPath/.babelrc

を実行して、再度コンパイル。 すると次は

Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-preset-env'

というエラーで落ちる。
これは単純にpostcss-preset-envが無いだけなので、以下の公式サイトを参考にインストール。

github.com

ここまでできたら再度コンパイル。
もしかするとcheck_yarn_integrityのバリデーションにかかってコンパイルが成功しないかもしれない。
そのときは config/webpacker.yml のcheck_yarn_integrityをfalseに変更すれば直る。

以上

他にもエラーで進まないとかがあればぜひ教えてほしいです！