Vue.js scheint cool zu sein

Ich wollte cool sein. Ich wollte die Seite unter persönlicher Entwicklung cool machen. Ich wollte es zu einem Guin und einem Baban machen. Ich habe beschlossen, Vue.js vorzustellen.

Ich kenne das Prinzip seiner Arbeitsweise noch nicht, aber ich habe mich entschieden, weil die Lernkosten niedrig sind und die Dokumentation erheblich zu sein scheint.

Einführung von Webpacker und Garn

Zunächst scheint es, dass Webpacker und Garn notwendig sind.

Ein Webpacker ist ein Modulbündler, der mehrere Javaskripte zu einem kombiniert. Ich bin mir nicht sicher, was das ist. Wenn Sie jedoch hier stecken bleiben, können Sie das mit Vue.js nicht cool machen. Aufgeschoben.

Es scheint, dass Garn ein Paketmanager ist. Es scheint eine erweiterte Version von npm zu sein. Es scheint einfacher zu sein, Bibliotheken hinzuzufügen und zu verwalten. Ja wirklich.

Beide waren bereits in meiner Rails-App vorhanden. Das Gemfile hatte die folgende Beschreibung.

gem "webpacker", "~> 4.x"

Garn wurde bereits installiert. Ich habe die Version überprüft und es gab kein Problem.

$ yarn -v

Erstellen einer ersten Datei für Vue

Führen Sie den folgenden Befehl im Terminal aus, um die für vue erforderlichen Dateien zu erstellen.

$ bundle exec rails webpacker:install:vue

Auf verschiedene Arten hergestellt.

In der Ansichtsdatei beschrieben

Fügen Sie die folgende Beschreibung zu application.html.erb hinzu.

`erb:view/layouts/application.html.erb`


 <!--Abkürzung-->
 <body>
  <%= javascript_pack_tag 'hello_vue' %>
  <%= stylesheet_pack_tag 'hello_vue'  %> 
<!--Abkürzung-->

Wenn Sie dies tun, wird "Hallo Ansicht!" Unten auf der oberen Seite angezeigt. Wenn es angezeigt werden kann, ist es erfolgreich. Du hast es geschafft.

Was ist in Vue.js zu sehen

Es scheint, dass Sie app / javascript / packs / hello_vue.js mit javascript_pack_tag laden können. Dieses hello_vue.js bezieht sich auf app / javascript / app.vue. Lass uns einen Blick darauf werfen.

`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>

Es ist eine CSS-ähnliche Beschreibung, sodass Sie sie ohne großen Widerstand lesen können. Anscheinend ist "Hello Vue!" In der "{{message}}" in der Vorlage enthalten. Als ich versuchte, die Zeichenkette zu ändern, wurde es so.

Dies scheint als Datenbindung bezeichnet zu werden. Es ist cool.

Erstellen Sie Ihre eigene Vue-Datei

Ich kann Hello World nicht für immer machen, also lass uns mehr damit spielen. Ich möchte selbst eine Vue-Datei erstellen. Lesen Sie vorher die vorherige hello_vue.js. Es sollte viele Kommentare geben.

`app/javascript/packs/hello_vue.js`


//Verschieden geschrieben

// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:

// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>

//Code unten

Es ist ein wenig mühsam, also lassen Sie es uns ins Japanische übersetzen.

//Der Code oben wird verwendet, wenn Vue ohne Compiler verwendet wird. Dies ist eine vorhandene HTML-Vorlage
//Auf der anderen Seite wird es verwendet, wenn Sie sich nicht mit Vue anlegen können.
//Ja, dies ist immer eine einzelne Komponente.

//Wenn Sie Ihrem vorhandenen HTML-Code Code hinzufügen möchten, kommentieren Sie den Code aus.
//Und zu HTML<%= javascript_pack_tag 'hello_vue' %>Hinzufügen.
//Betten Sie danach das folgende div-Tag ein.

Ich verstehe ein wenig. Deshalb kommentieren wir den Code oben und den Code unten aus.

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello',
    data: {
      message: "Can you say hello?"
    },
    components: { App }
  })
})

Dies sollte herauskommen. Danach fügen wir application.html.erb eine Beschreibung hinzu.

 <body>
 <!--Abkürzung-->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
　<!--Abkürzung-->

Dies ändert "Hallo Vue!" In "Kannst du Hallo sagen?".

Irgendwie habe ich es verstanden. Kopieren Sie anschließend die Datei und erstellen Sie Ihre eigene Vue-Datei. Kopieren Sie die app / javascript / packs / hello_vue.js von früher (kein Kommentarteil erforderlich) und erstellen Sie eine neue Datei mit dem Namen app / javascript / packs / custom_vue.js. Nehmen Sie einige Korrekturen vor.

`app/javascript/packs/custom_vue.js`


import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello2',
    data: {
      message: "Können Sie mich hören Das ist vue.Es ist js. HTML nicht schreiben"
    },
    components: { App }
  })
})

Ändern Sie danach einen Teil der Beschreibung von application.html.erb.

<%= javascript_pack_tag 'custom_vue' %> <!--← Hinzufügen-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

<!--Abkürzung-->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
    <!--Addiere ↓-->
    <div id="hello2">
      <p>{{ message }}</p>
    </div> 
<!--Abkürzung-->

Es wird so sein.

Es ist fertig! !! !! !!

abschließend

Vue.js macht Spaß. Ich bin mir nicht sicher, aber es sollte Spaß machen. Dies liegt daran, dass es leicht zu verstehen ist, da sich das Erscheinungsbild drastisch ändert. Ich werde weiterhin den Fortschritt der persönlichen Entwicklung veröffentlichen und die Orte vorstellen, an denen ich feststeckte.

Danke für Ihre Unterstützung!

Referenz

https://github.com/rails/webpacker/blob/master/docs/integrations.md#vue

Unterrichtsmaterial für Startschienen https://freelance.cat-algorithm.com/lp/take-off-rails

[RUBY] Einführung von Vue.js in eine vorhandene Rails-App