[RUBY] [Vue Rails] "Hallo Vue!" Wird mit Vue + Rails angezeigt

Erstellung der Vue + Rails-App

◆ Rails-App-Erstellung

// "-webpack=vue"Optionaler Vue.js verfügbar
$ rails new <Anwendungsname> -webpack=vue

◆ Modellerstellung

//Spaltenname: Name Datentyp: Text
$ rails g model sample name:text

◆ Bearbeitung der Migrationsdatei (für Hello.Vue! Display nicht erforderlich)

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

◆ Migration

$ rails db:create      //Datenbankerstellung
$ rails db:migrate　   //Implementierung der Migration

◆ Controller-Erstellung

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

◆ Bearbeiten Sie route.rb

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

◆ Bearbeiten Sie index.html.erb

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

◆ hello.vue.js (standardmäßig festgelegt)

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 (standardmäßig eingestellt)

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>

Memorandum

◆ before_action

• Definieren Sie eine Methode und setzen Sie sie auf "before_action"

login_controller.rb

class LoginController < ApplicationController
  before_action :set_answer
  
  def set_answer
    @sample = "Hello World!"  
  end
end

◆ rescue_from --Ausnahmebehandlung. Stellen Sie den Bildschirm für die Fehlerbehandlung ein --Schreiben Sie in app / controller / application_controller.rb

app/controller/application_controller.rb

class ApplicationController < ActionController::Base

  rescue_from ActiveRecord::RecordNotFound, with: :rescue404

end

Fehler aufgetreten

◆ Fehlerdetails ①

Webpacker::Manifest::MissingEntryError in Home#index

Lösung: Webpack-Installation

$ yarn
$ bin/yarn
$ webpack
$ webpack

◆ Fehlerdetails ②

Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

Lösung: Vue-Loader-Downgrade

$ npm remove vue-loader
$ npm install --save [email protected]
$ yarn add [email protected]

◆ Fehlerdetails ③

Sprockets::Rails::Helper::AssetNotFound in Home#index
 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Lösung: Bearbeiten Sie app / views / layouts / application.html.erb

app/views/layouts/application.html.erb

<!-- javascript_include_Tag-Zeile löschen-->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Verweise

• Einführung in moderne WEB-Anwendungen, beginnend mit Ruby on Rails, Vue.js
• Ich habe so etwas wie ein TODO-App-Tutorial mit Vue.js und Rails erstellt
• Nützlich in der Praxis! Verwendung von before_action von Ruby on Rails [Für Anfänger]
• [[Rails] Fehlersammlung, die während der Installation zum Auslösen neigt](Webpacker :: Manifest :: MissingEntryError im Home # -Index)
• Fehler: Für vue-loader muss @ vue / compiler-sfc im Abhängigkeitsbaum # 1672 vorhanden sein
• [Npm / Garn] Downgrade-Paket