LoginSignup
0
0

More than 3 years have passed since last update.

既存のrailsプロジェクトにwebpackerを使ってvue.jsを導入する方法

Posted at

はじめに

web開発では、jqueryの代わりにvue、react、angularが利用されていることが多くなっています。
今回は学習コストが低いと言われているvue.jsを利用してアニメーションを用いたrailsアプリを作ろうと思い、
既存のrailsプロジェクトにvueを導入しようと思いましたが、結構手こずったので記録を残しておきます。

手順

①nvm(Node Version Manager)をインストール
nvmとは、Node.jsのバージョンを管理するツールです。
nvmのバージョンは「Node.js リリース一覧」で確認できます。

nvm install 16.20

②Node.jsをインストール
Node.jsとは、javascriptの実行環境のことです。
詳しくは「Node.jsとはなにか?なぜみんな使っているのか?」の記事が非常に参考になります。

nvm install node

③npm(Node Package Manager)をアップデート
npmはNode.jsをインストール際に同時にインストルされます。
npmとは、Node.jsで使える色々な機能がつまったものを管理するツールです。
詳しくは「便利なパッケージ管理ツール!npmとは【初心者向け】」の記事が参考になります。

npm update -g npm

④webpackerをインストール
webpackerとは、ruby on rails上でwebpackを使用し、javascriptやcss、画像およびフォントを管理することができるものです。
Sprocketsと同様、アセットパッケージングツールです。
詳しくは「Railsガイド Webpackerの概要」が参考になります。

Gemfile
gem ‘webpacker’, ‘~> 4.0’

注)はじめは、githubのバージョンに頼るように以下のようにgemファイルに記入していましたが、
エラーが出てしまいました。なので、バージョン指定をするようにgemファイルに記入する方が
良いかと思います。

Gemfile
gem 'webpacker', github: "rails/webpacker"

⑤Yarnのインストール
Yarnとは、javascriptのパッケージを管理するツールです。
npmとYarnの違いについては「npmとは yarnとは」が非常に参考になります。

npm install -g yarnd

⑥webpackerのインストール

rails webpacker:install

⑦Vue.jsのインストール

rails webpacker:install:vue

これで完了です。

最後に

まだ、どのようにrailsアプリにvue.jsがどうやって反映されていくか、仕組みが分からないので、
rails×vue.jsのアプリを作成できるように、勉強していきます。
これからの気づきやつまづいたところについては、今後記事にしていきます。

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0