Vue.js semble être cool

Je voulais être cool. Je voulais rendre le site en développement personnel cool. Je voulais en faire une Guin et un Baban. J'ai décidé de présenter Vue.js.

Je ne connais pas encore le principe de son fonctionnement, mais j'ai décidé d'y aller car le coût d'apprentissage est faible et la documentation semble conséquente.

Introduction du webpacker et du fil

Tout d'abord, il semble que le Webpacker et le fil soient nécessaires.

Un webpacker est un bundler de modules qui a pour rôle de combiner plusieurs javascripts en un seul. Je ne sais pas ce que c'est. Cependant, si vous êtes coincé ici, vous ne pouvez pas faire ça avec Vue.js. Reporté.

Il semble que yarn soit un gestionnaire de paquets. Cela semble être une version améliorée de npm. Cela semble faciliter l'ajout et la gestion des bibliothèques. Vraiment.

Les deux étaient déjà en place dans mon application Rails. Le Gemfile avait la description suivante.

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

le fil était déjà installé. J'ai vérifié la version et il n'y a pas eu de problème.

$ yarn -v

Créer un fichier initial pour Vue

Exécutez la commande suivante dans le terminal pour créer les fichiers requis pour vue.

$ bundle exec rails webpacker:install:vue

Fabriqué de différentes manières.

Décrit dans le fichier de vue

Ajoutez la description suivante à application.html.erb.

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


 <!--Abréviation-->
 <body>
  <%= javascript_pack_tag 'hello_vue' %>
  <%= stylesheet_pack_tag 'hello_vue'  %> 
<!--Abréviation-->

Lorsque vous faites cela, "Hello View!" Sera affiché en bas de la page supérieure. S'il peut être affiché, il réussit. Tu l'as fait.

Que regarder dans Vue.js

Il semble que vous puissiez charger app / javascript / packs / hello_vue.js en utilisant javascript_pack_tag. Ce «hello_vue.js» fait référence à «app / javascript / app.vue». Nous allons jeter un coup d'oeil.

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

C'est une description de type CSS, vous pouvez donc la lire sans trop de résistance. Apparemment, "Hello Vue!" Est inclus dans le "{{message}}" du modèle. Quand j'ai essayé de changer la chaîne de caractères, c'est devenu comme ça.

Cela semble être appelé liaison de données. C'est cool.

Créez votre propre fichier Vue

Je ne peux pas faire Hello World pour toujours, alors jouons plus avec. Je souhaite créer moi-même un fichier Vue. Avant cela, lisez le précédent hello_vue.js. Il devrait y avoir beaucoup de commentaires.

`app/javascript/packs/hello_vue.js`


//Écrit de manière variée

// 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 ci-dessous

C'est un peu gênant, alors traduisons-le en japonais.

//Le code en haut est utilisé lors de l'utilisation de Vue sans compilateur. Ceci est un modèle html existant
//D'autre part, il est utilisé lorsque vous ne pouvez pas jouer avec Vue.
//Oui, il s'agit toujours d'un seul composant.

//Si vous souhaitez ajouter du code à votre html existant, commentez le code.
//Et au html<%= javascript_pack_tag 'hello_vue' %>Ajouter.
//Après cela, intégrez la balise div suivante.

Je comprends un peu. C'est pourquoi commentons le code en haut et commentons le code en bas.

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 }
  })
})

Cela devrait sortir. Après cela, ajoutons une description à application.html.erb.

 <body>
 <!--Abréviation-->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
　<!--Abréviation-->

Cela changera "Hello Vue!" En "Pouvez-vous dire bonjour?".

D'une manière ou d'une autre, je l'ai compris. Après cela, copiez le fichier et créez votre propre fichier Vue. Copiez le app / javascript / packs / hello_vue.js de plus tôt (aucune partie de commentaire requise) et créez un nouveau fichier appelé app / javascript / packs / custom_vue.js. Faites quelques corrections.

`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: "Peux-tu m'entendre C'est vue.C'est js. Ne pas écrire de HTML"
    },
    components: { App }
  })
})

Après cela, modifiez une partie de la description de application.html.erb.

<%= javascript_pack_tag 'custom_vue' %> <!--← Ajouter-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

<!--Abréviation-->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
    <!--Ajouter ↓-->
    <div id="hello2">
      <p>{{ message }}</p>
    </div> 
<!--Abréviation-->

Ce sera comme ça.

C'est fait! !! !! !!

en conclusion

Vue.js est amusant. Je ne suis pas sûr, mais ça devrait être amusant. C'est parce qu'il est facile à comprendre parce que l'apparence change radicalement. Je continuerai à publier les progrès du développement personnel et à présenter les endroits où je suis resté coincé.

Merci pour votre soutien!

référence

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

Matériel pédagogique pour le décollage https://freelance.cat-algorithm.com/lp/take-off-rails

[RUBY] Présentation de Vue.js à une application Rails existante