![見出し画像](https://assets.st-note.com/production/uploads/images/10057141/rectangle_large_type_2_a79304ac83cd27769164e864d2f0ec5f.png?width=1200)
既存のRailsアプリにVue.jsをサクッと導入してみる:開発作業ログ
既存のRailsアプリ(slim利用)にVue.jsをテスト導入してみる覚え書き。
↓の派生です。
準備
Gemfileに
# Use webpack
gem 'webpacker', github: 'rails/webpacker'
を追加して、terminalで
bundle install
bin/rails webpacker:install
bin/webpack
の順に入力。
bin/webpackで /app/javascripts の中に /packs/application.js が出来ているはず。今回使わないので消しちゃってもOK。
Vue.jsを導入
rails webpacker:install:vue
vueを使うための色々が入ってくれる。/app/javascripts を確認。
これでvueの導入は完了。
念のため確認しよう
app.slimを新規作成
index.slimは使っていてまだ変更したくないので、テスト的にapp/views/pagesにapp.slimというファイルを作ってそちらに飛ばしてチェックしていきます。
app.slim
doctype html
html lang="ja"
head
body
include app/views/layouts/_header
= yield
= javascript_pack_tag 'hello_vue'
上記のようにheader足してる場合には念のためapp.vueのstyleにmargin-top: 50px;とか仮で適当に追記しておいてね(隠れちゃうから)
routes.rbに記述を追加
get〜〜の部分を追加
Rails.application.routes.draw do
get "/" => "pages#app"
end
これでhttp://0.0.0.0:3000/はindexではなくapp.slimが該当するようになる。
railsサーバ起動。
rails s
http://0.0.0.0:3000/ に既存のindexではなく「Hello Vue!」と表示されていればOK。
head部分に仮で
script src="https://cdn.jsdelivr.net/npm/vue"
これ入れてた場合は消せます。
この記事が気に入ったらサポートをしてみませんか?