Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

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

$
0
0
はじめに 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を導入する

Viewing all articles
Browse latest Browse all 8691

Trending Articles