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. 実行する
プリコンパイル
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') }
スポンサーリンク
関連記事
公開日:2020年06月20日
記事NO:02831