0
Help us understand the problem. What are the problem?

posted at

updated at

RailsプロジェクトにVue.js導入の仕方

概要

RailsとVue.jsで開発を行うときにVue.jsの導入で躓いたので共有します
色々記事を見ながら試したんですけどエラーで詰まってハマってしまったので1人でも多くの人に共有できればと思います。

はじめに

Railsの環境構築は終わったものとする(rails new できる状態)

環境構築

環境構築にはhomebrewとrbenvを使用します
まだの方はこちらからインストールしてください

使用する環境

  • MacOS(m1)
  • Rails 6.1.5
  • Ruby 3.1.0
  • yarn 1.22.17
  • Homebrew 3.4.8

はじめにアプリケーションを作成するディレクトリを作成

$ mkdir rails_Vue_app
$ cd rails_Vue_app

Rails プロジェクトの作成

バージョンを指定して作成

$ rails _6.1.5_ new rails_Vue_sampleapp --webpack=vue

プロジェクトへ移動

$ cd rails_Vue_sampleapp

サーバー起動

$ rails s

http://localhost:3000 にアクセスしてこの画面が出たら成功です

スクリーンショット 2022-04-29 16.18.29.png

HelloVueまで

railsプロジェクトの作成をしたのでHelloVueの表示をしていこうと思います

コントローラーの作成

$ rails g controller home index

Javascript_pack_tagを使ってjavascriptを読み込むようにする

javascript_pack_tag を使用することで app/javascript/packs 配下にあるファイルの読み込みが可能になります
今回は、読み込む対象としてhello_vue.js を指定します。
rails new の時にVueを指定するとVueファイルが自動で生成されるので今回は作らなくて大丈夫です

app/views/home/index.html.erb
  <h1>Home#index</h1>
  <p>Find me in app/views/home/index.html.erb</p>
+ <%= javascript_pack_tag 'hello_vue.js' %>

ルーティングを変更

config/routes.rb
- get 'home/index'
- # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+ root 'home#index'

これでrailsサーバーを再起動するとHelloVueが表示されるとの記事が多いのですが自分の環境だと何も表示されない😅

スクリーンショット 2022-04-29 15.32.09.png

何故だああああああああああああああ😭😭
色々な記事を読んで調べるものの手がかりがなくて1日ほど経過

解決方法

Vue.jsのバージョンの問題かもしれないとの記事を発見

$ npm list vue

これでVue.jsのバージョンを確認できる
自分の場合は3.2.33だった

どうやら2系にすると上手くいくらしい

早速package.jsonファイルを編集していく

package.json
- "vue": "^3.2.33",
+ "vue": "^2.6.14",

に書き換えてインストール

$ npm install

バージョン確認

$ npm list vue

ちゃんと2.6.14になってた

さいどrailsサーバーを再起動

スクリーンショット 2022-04-29 15.32.09.png
何故だーーーーー😱😱

先輩が調べてくださり、Vueを2系にするなら他のやつも依存関係が原因かもとのこと
試してみる

package.json
- "vue-loader": "^17.0.0",
-  "vue-template-compiler": "^2.6.14",
+ "vue-loader": "^15.7.0",
+ "vue-template-compiler": "^2.6.12",

に書き換えてインストール

$ npm install

エラーがでる
スクリーンショット 2022-04-29 15.54.17.png
よく読むと依存関係の問題らしいエラーの指示通りに-fオプションをつける

$ npm install -f

そしてrailsサーバーを再起動
今度こそ!!きたーーーーーー🥺🥺🥺
スクリーンショット 2022-04-29 15.57.23.png

最後に

先輩のぐぐり力は偉大なり
初めての書いたので色々わかりにくいところなどあるかも知れませんが多めに見ていただけると助かります

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?