Ruby on Rails + Vue.jsで環境構築
4475 ワード
Railsのバージョンを指定して新規プロジェクトを立ち上げ
今回はRails6でプロジェクトを立ち上げるため、バージョンを指定してrails newします。
(Rubyのバージョンは2.7.2です。)
Vue.jsを使用するために--webpack=vueオプションを追加します。
$ rails _6.0.0_ new sample --webpack=vue
Vue2系を使えるように設定
先ほどのコマンドではVue3系が入ってしまうため、package.jsonを編集して2系を手動で入れる。
package.json
+ "vue": "^2.6.14",
+ "vue-loader": "^15.7.0",
+ "vue-template-compiler": "^2.6.12"
- "vue": "^3.2.33",
- "vue-loader": "^17.0.0",
- "vue-template-compiler": "^2.6.14"
変更後、yarn install
$ yarn install
トップページにHello Vue!を表示させる
home_controller.rbを新規作成します。
app/controllers/home_controller.rb
class HomeController < ApplicationController
def index
end
end
次に、routes.rbを編集しhome#indexをrootに設定します。
config/routes.rb
Rails.application.routes.draw do
root to: 'home#index'
end
最後に、Webpackerを使用してJSを読み込むためにindex.html.erbを新規作成します。
sample/app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
表示を確認するためにrails sでアプリケーションサーバを起動します。
$ rails s
localhost:3000にアクセスし、Hello Vue!が表示されていれば終了です。
Author And Source
この問題について(Ruby on Rails + Vue.jsで環境構築), 我々は、より多くの情報をここで見つけました https://zenn.dev/n199603/articles/a555f46fb6614d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol