ホーム > カテゴリ > Ruby・Ruby on Rails >

RailsでVue.jsの開発を行う [単一ファイルコンポーネント/Hello Wolrd]

1. プロジェクトの作成

cd ~/
mkdir myapp
cd myapp
rails new . --webpack=vue --skip-turbolinks --skip-action-mailer --skip-action-mailbox --skip-active-storage --skip-test -d mysql

2. Vue.jsをIE11に対応させる

// yarnでIE11用のパッケージを追加する
yarn add babel-polyfill

// 以下のパッケージが不要であれば実行してください。
yarn remove @rails/actioncable
yarn remove @rails/ujs

// その場合はapp/javascript/packs/application.jsの
// 次を削除して下さい。
require("@rails/ujs").start()
require("channels")

※パッケージの詳細は「package.json」で確認可能です。

3. コントローラー/ビューの作成

bin/rails g controller pages index

4. 各種ファイル

app/javascript/app.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

app/javascript/packs/hello_vue.js

// IE11でVue.jsを動作させる
import "babel-polyfill"
// Vue.js
import Vue from 'vue'
// コンポーネント
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.getElementById('root').appendChild(app.$el)
})

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
    <%= javascript_pack_tag 'hello_vue' %>   
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/views/pages/index.html.erb

<div id="root"></div>

config/database.yml

database、username、passwordを設定する。未設定でログインできない場合は「Access denied for user 'root'@'localhost' (using password: NO)」のエラーとなる。

config/routes.rb

Rails.application.routes.draw do
  get 'pages/index'
  root to: 'pages#index'
end

5. 実行する

http://localhost:3000/

プリコンパイル

bin/rails assets:precompile

public/packs/jsに圧縮されたJSファイルが作成されます。

CSRFトークン

AjaxでCSRFトークンが必要な場合は次のように取得します。

headers:{
  // JSON
  'Content-Type': 'application/json',
  // CSRFトークン
  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') 
}





関連記事


前の記事：Rails + JQuery + AjaxでCRUDのサンプルプロジェクト [Hello World]
次の記事：Vue Routerの使い方 [Rails]

公開日：2020年06月20日
記事NO：02831