#Vue + Railsアプリ作成
####◆ Railsアプリ作成
// "-webpack=vue"オプションでVue.js使用可能
$ rails new <アプリケーション名> -webpack=vue
◆ model作成
// カラム名：name データ型：text
$ rails g model sample name:text
####◆ migrationファイル編集(Hello.Vue!表示には不要)
db/migrate/20200627045139_create_sample.rb
class CreateSample < ActiveRecord::Migration[6.0]
def change
create_table :sample do |t|
t.text :name, null: false, default: ""
end
end
end
####◆ マイグレーション
$ rails db:create //データベース作成
$ rails db:migrate //マイグレーション実施
####◆ controller作成
app/controllers/home_controller.rb
class HomeController < ApplicationController
def index
end
end
####◆ routes.rb編集
config/routes.rb
Rails.application.routes.draw do
root to: 'home#index'
end
####◆ index.html.erb編集
app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
####◆ hello.vue.js（デフォルトで設定済）
app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const el = document.body.appendChild(document.createElement('hello'))
const app = new Vue({
el,
render: h => h(App)
})
console.log(app)
})
####◆ app.vue(デフォルトで設定済)
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>
#備忘録
####◆ before_action
- メソッドを定義して、
before_actionにセットする
login_controller.rb
class LoginController < ApplicationController
before_action :set_answer
def set_answer
@sample = "Hello World!"
end
end
####◆ rescue_from
-
例外処理。エラー処理を行う画面を設定する -
app/controller/application_controller.rbに記述する
app/controller/application_controller.rb
class ApplicationController < ActionController::Base
rescue_from ActiveRecord::RecordNotFound, with: :rescue404
end
#遭遇したエラー
####◆ エラー内容①
Webpacker::Manifest::MissingEntryError in Home#index
####解決策：Webpackインストール
$ yarn
$ bin/yarn
$ webpack
$ webpack
####◆ エラー内容②
Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
####解決策：vue-loaderダウングレード
$ npm remove vue-loader
$ npm install --save vue-loader@15.9.2
$ yarn add vue-loader@15.9.2
####◆ エラー内容③
Sprockets::Rails::Helper::AssetNotFound in Home#index
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
####解決策：app/views/layouts/application.html.erb編集
app/views/layouts/application.html.erb
<!-- javascript_include_tagの行を削除 -->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
#参考文献