// "-webpack=vue"Optional Vue.js available
$ rails new <Application name> -webpack=vue
//Column name: name Data type: text
$ rails g model sample name:text
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 //Database creation
$ rails db:migrate //Migration implementation
app/controllers/home_controller.rb
class HomeController < ApplicationController
def index
end
end
config/routes.rb
Rails.application.routes.draw do
root to: 'home#index'
end
app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
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/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
--Define a method and set it to before_action
login_controller.rb
class LoginController < ApplicationController
before_action :set_answer
def set_answer
@sample = "Hello World!"
end
end
◆ rescue_from
--Exception handling
. Set the screen for error handling
--Write in `ʻ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
$ yarn
$ bin/yarn
$ webpack
$ webpack
Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
$ npm remove vue-loader
$ npm install --save [email protected]
$ yarn add [email protected]
Sprockets::Rails::Helper::AssetNotFound in Home#index
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
app/views/layouts/application.html.erb
<!-- javascript_include_Delete tag line-->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
-Introduction to modern web applications starting with Ruby on Rails, Vue.js -I made something like a TODO app tutorial with Vue.js and Rails -Useful in practice! How to use before_action of Ruby on Rails [For beginners] -[[Rails] Error collection that tends to trip during installation](Webpacker :: Manifest :: MissingEntryError in Home # index) -Error: vue-loader requires @ vue / compiler-sfc to be present in the dependency tree # 1672 -[Npm / yarn] Downgrade the package
Recommended Posts