これからVue.jsを触ってみよう！と思い、Rails + Vue.jsの環境を構築してみた。
AngularとかReactとか比較されるFWは他にもあるけど、なぜかVue.jsが気になる。簡単に始められそうっていうのはあるのかも。
環境はこんな感じ。
Debian 9 / Ruby 2.4.1 (on rbenv) / Rails 5.2.1
参考サイトがかなり良質なので簡単にいくかと思ったら、Debian固有？の壁が少しあって、ちょっとつまずいたので残しておきます。
先人の知恵をお借りして、下記サイトを参考にしました。
準備
Vue.jsはnode.jsで動くので、node.jsとYarnをインストール。
$ sudo apt-get install nodejs yarn build-essentialひとまずこれでnode.jsとYarnはインストール完了。
build-essential はRubyをrbenvで入れている環境なら既に入っているかも。自分の環境は入ってた。
RubyとRailsは事前に入れておいてくださいね。
rails new でコケる
意気揚々と rails new app_name --webpack=vue を実行。
そしてコケる。こんな感じのエラーメッセージが出た。
rails webpacker:install
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
rails webpacker:install:vue
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
run bundle exec spring binstub –all
Yarnを差し替え
Yarnのバージョン？
Debian 9のyarnパッケージは仮想パッケージで、実際にはcmdtestというパッケージがインストールされる。これが問題？
と言うことで、Yarnを本家のパッケージからインストール。手順はここから。
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update
$ sudo apt-get install yarnこれで大丈夫だろうと、 rails new app_name --webpack=vue を実行。
そしてコケる。今度はこんな感じのエラーメッセージが出た。
rails webpacker:install
sh: 1: node: not found
Webpacker requires Node.js >= 6.0.0 and you are using 4.8.2
Please upgrade Node.js https://nodejs.org/en/download/
rails webpacker:install:vue
sh: 1: node: not found
Webpacker requires Node.js >= 6.0.0 and you are using 4.8.2
Please upgrade Node.js https://nodejs.org/en/download/
run bundle exec spring binstub –all
node.jsをアップデート
Debian 9標準パッケージのnode.jsはバージョンが低く、Vue.jsは動かないらしい。node.jsは最低Ver.6が必要とのこと。
そこで Installing Node.js via package manager を参考にして最新版をインストール。
事前に、さっきインストールした標準パッケージのnodejsは削除しておいた方が良い。
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs改めて rails new app_name --webpack=vue を実行。
今度はいけた！
と言うことで
Debian 9にVue.jsを入れるときは、node.jsとYarnを本家の新しいパッケージに入れ替える必要がある。
いじょう